相关疑难解决方法(0)
为什么CSS2.1定义溢出值而不是"可见"来建立新的块格式化上下文？
CSS2.1规范要求overflow除了visible建立新的"块格式化上下文"之外.这让我觉得很奇怪,一个明显的目的是隐藏溢出而不影响布局的属性实际上确实会以一种主要方式影响布局.
看起来像溢出值除了visible组合两个完全不相关的特征之外:是否创建了BFC以及是否隐藏了溢出.它不像"溢出:隐藏"在没有BFC的情况下完全没有意义,因为浮动历史上可以溢出它们的父元素,隐藏溢出而不改变布局似乎是明智的.
这个决定背后的原因是什么,假设它们已知？那些参与规范工作的人是否描述了为什么决定这种情况？
推荐指数
解决办法
查看次数
设置overflow-x:hidden会添加一个垂直滚动条
当我指定overflow-x: hidden一个水平和垂直溢出的元素时,除了隐藏水平溢出的内容之外,该元素还会获得一个垂直滚动条.我试过添加overflow-y: visible,甚至只是overflow: visible,没有效果.
我误解了这些属性的作用吗？我认为这overflow-x根本不应该影响垂直溢出.
这种情况发生在我尝试的每个浏览器上.
这是一个演示效果的片段.我正在使用<pre>标签,因为它们是创建溢出内容的简单方法,但它似乎与任何标签一起发生.
pre {
height: 40px;
width: 150px;
margin-bottom: 50px; /* We need this so they don't overlap. */
}
#x-hidden {
overflow-x: hidden;
}
#y-visible {
overflow-x: hidden;
overflow-y: visible;
}
#visible {
overflow: visible;
overflow-x: hidden;
}<pre>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
Integer mollis quis magna quis vulputate.
Cras …推荐指数
解决办法
查看次数
overflow-x:隐藏仍然可以滚动
问题是:
我有一个全宽度条形菜单,通过在右侧和左侧创建一个大的边距.这个边距应该被裁剪overflow-x: hidden,它是......没有滚动条,一切(视觉上)都可以......
但是,如果你拖动页面(使用Mac Lion)或向右滚动,页面会显示一个巨大的条形图,它应该被裁剪掉overflow-x:hidden.
CSS
html {
margin:0;
padding:0;
overflow-x:hidden;
}
body {
margin: 0 auto;
width: 950px;
}
.full, .f_right {
margin-right: -3000px !important;
padding-right: 3000px !important;
}
.full, .f_left {
margin-left: -3000px !important;
padding-left: 3000px !important;
}
这是一个链接:http://jsfiddle.net/NicosKaralis/PcLed/1/
你必须在草稿中打开才能看到... jsfiddle css以某种方式使它工作.
@Krazer
我有这样的结构:
body
div#container
div#menu_bar
div#links
div#full_bar
div#content_body
...
#container是一个居中的div,固定宽度为950px,#fulll_bar是一个在整个窗口上延伸的条形,从一侧到另一侧
如果我在#full_bar中放置100%的宽度,它将只获得内部宽度而不是窗口宽度
推荐指数
解决办法
查看次数
overflow-x:可见; 不适用于overflow-y:auto; 任何解决方法？
我在尝试
.item {
width: 100px;
overflow-x: visible;
overflow-y: auto;
}
但垂直溢出:auto似乎覆盖了水平
小提琴:http://jsfiddle.net/xcUTV/
这有什么解决方法吗？即使有一点javascript
推荐指数
解决办法
查看次数
overflow-y:当overflow-x:hidden存在时,可见不起作用
在Chrome或Firefox中无法正常运行.这有什么解决方法吗？
<!DOCTYPE html>
<html>
<head></head>
<body>
<h3>overflow-y:visible</h3>
with overflow-x:hidden
<div style="overflow-x:hidden;overflow-y:visible;width:100px;height:100px; position:relative;background:#666;">
<div style="top:20px;left:20px; width:420px;height:420px;position:absolute;background:#420;">
</div>
</div>
without overflow-x:hidden
<div style="overflow-y:visible;width:100px;height:100px;position:relative;background:#666;">
<div style="top:20px;left:20px; width:420px;height:420px;position:absolute;background:#420;">
</div>
</div>
</body>
</html>
真实场景涉及绝对必须具有overflow-x:hidden的组件,但这将触发弹出菜单,这些菜单需要能够在y方向上脱离元素.我应该将这些菜单放在其父组件之外,还是有更好的解决方法？
推荐指数
解决办法
查看次数
CSS overflow-x hidden和overflow-y visible
我已经读过这个SO帖子:css overflow-x visible和overflow-y hidden导致滚动条.
我也经历过:http://www.brunildo.org/test/Overflowxy2.html
我想实现如下目标:
当我尝试使用以下代码时:
overflow-x: hidden;
overflow-y: visible;
它显示如下结果:
我不希望滚动条出现.
Jquery有什么解决方案吗？
推荐指数
解决办法
查看次数
Android Stock浏览器不支持CSS溢出
我正在与一个客户一起工作,他们希望他们的部分界面有一个有点自定义的滚动方法.他们不希望通常的滚动条可见; 他们希望台式机/笔记本电脑用户使用鼠标滚轮/触摸板滚动,他们希望移动用户用手指滚动.他们还希望使用向上箭头和向下箭头的图形来提供另一种滚动方法,并使用户明白可以滚动(因为实际的滚动条是隐藏的).客户端设置为此滚动方法.
我整理了一些代码,这些代码适用于我尝试过的所有设备/浏览器组合,除了Android的股票浏览器.我已通过以下配置确认了此问题:
- Android 4.1.2(模拟器)
- Android 4.2.2(实际设备)
- Android 4.2.2(模拟器)
- Android 4.3(模拟器)
但是,Android 4.4.2(模拟器)上不存在此问题.
为了使这个问题变得简单,我不包括上下箭头的图形和随附的逻辑.
这是代码(jsFiddle演示):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo</title>
<style>
#side_nav, .category {
position: absolute;
}
#side_nav {
-webkit-user-select: none;
}
.category {
display: none; /* Will be shown when user clicks on an option */
top: 0;
left: 150px;
}
.ul_wrapper, .ul_wrapper ul {
width: 125px;
height: 242px;
}
.ul_wrapper {
background: #ccc;
border: 3px solid #000;
border-radius: 6px;
text-align: center; …推荐指数
解决办法
查看次数
溢出-x：滚动和溢出-y：可见替代
我有一个正在渲染图像的列表（水平滚动）：
<div id="my-cool-wrapper">
...
// My cool wrapper has more elements (apart from list)
<ul id="the-list" style="display: flex; flex-direction: row; overflow-x: scroll;">
<li>
<img src="https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg" />
</li>
<li>
<img src="https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg" />
</li>
<li>
<img src="https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg" />
</li>
</ul>
</div>
我想要有关transform: scale(1.5)用户交互的图像（例如单击、悬停等）。
问题：
- 图像不会溢出到父级之外。我希望图像在增长时完全可见（即使它超出列表的高度）。
overflow-y: visible我想我可以通过设置来实现这一点#the-list。然而，根据CSS的overflow-x:visible; 和溢出-y：隐藏；导致滚动条问题的线程这是不可能的。
有没有其他选择可以实现我想要的目标？
更新： JSFiddle 可用于演示该问题：http://jsfiddle.net/f7vdebt2/
我希望 的内容<ul>能够扩展到其父级边界之外。
推荐指数
解决办法
查看次数
"overflow-y:scroll;" 隐藏在水平线上的溢出元素
我有一个parent包含绝对定位childdiv的div.
所述child格被定位的初始边界之外parent的div.它正常渲染没有任何问题.
我overflow-y: scroll;在parentdiv中添加了一个,现在child尽管添加了元素,但仍然隐藏了元素overflow-x: visible;.
CSS
#parent{
position: relative;
overflow-y: scroll;
overflow-x: visible;
}
#child{
position: absolute;
left: -50px;
}
也是一个Fidle
推荐指数
解决办法
查看次数
设置overflow-y会导致overflow-x也发生变化
当我设置overflow-y一个街区时,它似乎正在影响overflow-x房产.我用一个这个问题的例子做了一个JSFiddle.它似乎正在所有浏览器中发生,所以我想我错过了一些显而易见的东西.
我有两个非重叠块(蓝色和绿色)以及第三个块(红色),具有以下要求:
- 蓝色和红色块相邻
- 红色块包含在蓝色块中,但它与绿色块重叠
- 蓝色块必须允许垂直滚动,但不允许水平滚动
但是,如果我设置overflow-x: visible为红色块重叠在右边,而是表现得好像我设置它scroll.但是,如果我删除overflow-y属性或将其设置为visible,则红色块的行为与我期望的一样.
我确实需要垂直滚动,所以我不知道该做什么.
使用下面的代码
HTML:
<div id="container">
<div id="left">
<div id="floater"></div>
</div>
<div id="right">
</div>
</div>
CSS:
#container {
height: 200px; width: 200px;
position: relative;
background-color: #ccc; border: solid 5px black;
}
#left {
position: absolute;
top: 0; left: 0; bottom: 0; width: 100px;
overflow-x: visible;
overflow-y: auto; /** REMOVING THIS CHANGES THE RESULT **/
background-color: blue;
z-index: 2; …推荐指数
解决办法
查看次数
标签 统计
css ×9
html ×6
overflow ×5
css3 ×3
javascript ×2
android ×1
jquery ×1
position ×1
stylesheet ×1