我有一个最大宽度的布局,当屏幕宽度大于最大值时,它会水平居中.布局包括固定的标题和菜单; 当屏幕宽度小于最大值时,菜单的left位置为0,当屏幕宽度超过最大值时,菜单的left位置需要与布局其余部分的左边缘齐平.
这是它应该看起来的样子:
*{box-sizing:border-box;margin:0;padding:0;}
header{
align-items:center;
background:#eee;
border-bottom:1px solid #999;
display:flex;
height:100px;
left:0;
justify-content:center;
padding:0 10px;
position:fixed;
right:0;
top:0;
}
h1{
height:60px;
position:relative;
width:calc(100% - 40px);
max-width:740px;
z-index:2;
}
img{
height:100%;
width:auto;
}
nav{
background:#eee;
border-right:1px solid #999;
bottom:0;
left:0;
position:fixed;
top:0;
width:300px;
z-index:1;
}
@media (min-width:801px){
nav{
border-left:1px solid #999;
left:calc((100% - 800px) / 2)
}
}
nav::before{background:#ecc;bottom:0;content:"";left:0;position:absolute;top:0;width:10px;}
nav::after{background:#999;content:"";height:1px;left:0;position:absolute;right:0;top:99px;}
main{background:#ddf;border-left:1px solid #99c;border-right:1px solid #99c;height:100vh;min-height:100%;margin:0 auto;width:100%;max-width:800px;}<header>
<h1><img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a"></h1>
<nav></nav>
</header>
<main></main>但是,当引入垂直滚动条时,由于滚动条宽度包含在媒体查询中检查的宽度中,导致问题出现,left …
基本上我需要知道y轴距离屏幕左上角有多少像素,直到我到达实际的Web窗口.有没有人有任何想法......？
我遇到了CKEditor自动增长插件的问题:
按下返回(自动生长超过最小高度后),文本内容会抖动(向上跳一行并向下跳),垂直滚动条会闪烁.自动增长工作,但用户体验是生涩的.
我可以通过指定scrolling ="no"和overflow ="hidden"隐藏垂直滚动条,但文本内容仍然会抖动.
我在ckeditor.js中禁用滚动:
<iframe scrolling="no" style="width:100%;height:100%;overflow:hidden;" frameBorder="0" title="'+E+'"'+' src="'+W+'"'+' tabIndex="'+(b.webkit?-1:C.tabIndex)+'"'+' allowTransparency="true"'+'></iframe>
CKEditor初始化代码:
CKEDITOR.replace('Description',
{
sharedSpaces:
{
top: 'topSpace',
bottom: 'bottomSpace'
},
extraPlugins: 'autogrow,tableresize',
removePlugins: 'maximize,resize,elementspath',
skin: 'kama',
toolbar: [['Format', 'Font', 'FontSize'], ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'], ['TextColor', 'BGColor'], ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], ['NumberedList', 'BulletedList'], ['Outdent', 'Indent'],
'/', ['Link', 'Unlink', 'Anchor'], ['Image', 'Flash', 'Table', 'HorizontalRule', 'SpecialChar'], ['PasteText', 'PasteFromWord'],['Cut','Copy','Paste'], ['Undo', 'Redo'], ['Find', 'Replace'], ['SpellChecker']],
toolbarCanCollapse: false,
pasteFromWordRemoveFontStyles: false,
enterMode: CKEDITOR.ENTER_BR,
shiftEnterMode: CKEDITOR.ENTER_P,
autoGrow_minHeight: 300
})
有没有办法避免文本内容在按下回车键时跳转/移动(在自动增长超过最小高度后)？
滚动.sortable()容器内的div将在释放滚动条时开始拖动div
在小提琴中,有3种不同的可排序,其中1种是滚动的
错误:单击滚动条并向上或向下拖动以滚动浏览内容,当您释放鼠标时,div开始拖动,这使得它跟随您的鼠标并且无法在不刷新页面的情况下解开它.
是什么原因导致滚动条没有被夹在这个小提琴的桌子一侧:http://jsfiddle.net/m4HB3/8/ 目前它位于最后一列的下方,意味着它占据了一些列空间和从而导致表格的对齐问题.
表标题是固定的,因为我想要一个带有固定标题的滚动表.
问题可能是表格和各列的宽度设置？
有人也可以在jsfiddle外面的脚本上发布他们的答案并直接放在浏览器上,因为我已经看到了jsifddle中有些工作但后来在浏览器的主应用程序中无法工作的示例.
HTML:
<table id="tableqanda" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th width="5%" class="questionno">Question No.</th>
<th width="27%" class="question">Question</th>
<th width="7%" class="option">Option Type</th>
<th width="11%" class="image">Image</th>
</tr>
</thead>
</table>
<div id="tableqanda_onthefly_container">
<table id="tableqanda_onthefly" cellpadding="0" cellspacing="0">
<tbody>
<tr class="tableqandarow">
<td width="5%" class="questionno">1</td>
<td width="27%" class="question">What is a RAM?</td>
<td width="7%" class="option">A-E</td>
<td width="11%" class="imagetd"><ul class="qandaul"><li>Lighthouse_4.jpg</li></ul></td>
</tr>
<tr class="tableqandarow">
<td width="5%" class="questionno">2</td>
<td width="27%" class="question">Name 3 car maneuvers you may do in a test?</td>
<td width="7%" class="option">A-F</td>
<td width="11%" …我正在使用以下两段CSS和JS代码:
@media (max-width: 720px) {
// a code to make arrows in a carousel disappear
}
if(jQuery(window).width() <= 720){
// a code to make arrows in the carousel stop working
}
它们的问题是后者在width = 738px而不是720px上执行.我怀疑这是因为浏览器的垂直滚动条在Chrome中的宽度等于18px.
有没有办法统一这个？我希望这些操作在所有浏览器中同时发生,而不管滚动条的宽度如何.
测试(当浏览器是@ 720px并且CSS已经执行时):
jQuery(document).innerWidth() = 703
jQuery(window).innerWidth() = 703
jQuery(document).width() = 703
jQuery(window).width() = 703
jQuery('body').width() = 703
jQuery('html').width() = 703
我有一个定义高度的div,和overflow:scroll;.它的内容太长,所以滚动条出现.
现在为ichy部分.它的一些内部HTML总是奇怪地出现(确切地说,是tableFilter插件生成的表的页脚).我想让这个页脚在不需要时消失(它实际上出现在包含<div>的边框之外).我决心使它消失,但设置其z-index到-1000.但是我希望在包含<div>完全向下滚动时显示它.
我怎么知道用户已在底部滚动？
使用从下面的答案的帮助下,我使用的scrollTop属性,但之间的差异scrollTop,并innerHeight为滚动条加上一些不明身份的三角洲的大小.在Windows下的大多数浏览器中,滚动条高16像素,但我在Firefox中有17个差异,在IE中有20个差异,我的<div>内容的边框似乎变大了.
在那里给出了一种计算滚动条大小的方法(实际上是两种方式......).
此代码适用于所有其他浏览器，但在 Safari 浏览器上右侧空间不对称，但在其他浏览器上一切正常。我知道 Safari 不支持此属性，我正在寻找解决方案。
.card {
background: red;
padding: 24px 12px 24px 24px;
width: 240px;
margin: 0 auto;
height: 160px;
}
.scrollable-content {
scrollbar-gutter: stable;
overflow-y: auto;
scrollbar-width: thin;
}
.scrollable-content::-webkit-scrollbar {
width: 12px;
background-color: blue;
}
.scrollable-content::-webkit-scrollbar-track {
border-radius: 8px;
}
.scrollable-content::-webkit-scrollbar-thumb {
background-clip: content-box;
background-color: rgba(136, 136, 136, 0.5);
border: 4px solid transparent;
border-radius: 8px;
height: 56px;
}
.scrollable-content::-webkit-scrollbar-thumb:hover {
background-color: #888888;
}
.card-body {
background-color: yellow;
}<div class="card scrollable-content">
<div class="card-body">
test lorem100
</div>
</div> …如何获得浏览器滚动条高度？JS是否有针对此案例的内置函数？有人请帮我解决这个问题.
所以我有一个包含多个选项的选择列表.
列表本身受宽度限制.预计大多数选项都适合列表宽度,但可能会有一次更长,我应该处理这种情况.
overflow-x:scroll帮助我看到长选项值(通过x轴滚动),但我有一些问题:当我选择一个长选项(不适合选择宽度)并滚动x-asis时,我选项中的文字是修剪选择lenth.但是我想让它在滚动时完全显示出来.
注意:我知道在选择时应用自动宽度的解决方案,但我不允许在此处更改宽度.它应该保持不变.
select {
width: 100px;
overflow-x:scroll;
} <select multiple size="5">
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
<option>Some Very Long Option</option>
</select>