标签: overflow
Div高度100%并扩展以适合内容
我的页面上有一个div元素,其高度设置为100%.身体的高度也设定为100%.内部div具有背景和所有这些并且与身体背景不同.这适用于使div高度为浏览器屏幕高度的100%,但问题是我在div内部的内容垂直延伸超出浏览器屏幕高度.当我向下滚动时,div在您必须开始滚动页面的位置结束,但内容溢出超出该范围.如何让div始终一直到底以适应内在的内容？
这是我的CSS的简化:
body {
height:100%;
background:red;
}
#some_div {
height:100%;
background:black;
}
滚动页面后,黑度结束,内容流向红色背景.在#some_div上我将位置设置为相对位置还是绝对位置似乎并不重要,问题是否发生.#some_div中的内容大多是绝对定位的,它是从数据库动态生成的,因此无法提前知道其高度.
编辑:以下是问题的屏幕截图:
推荐指数
解决办法
查看次数
如何获得溢出的真实.height():隐藏或溢出:滚动div？
我有一个关于如何获得div高度的问题.我知道.height()并且innerHeight(),但在这种情况下,他们都没有为我做这项工作.问题是,在这种情况下,我有一个溢出宽度溢出的div:scroll和div有一个固定的高度.
如果我使用.height()或者innerHeight(),它们都给了我可见区域的高度,但如果我想要考虑溢出,我该怎么办？
推荐指数
解决办法
查看次数
有一个固定的位置div,如果内容溢出需要滚动
我实际上有两个问题,但我们首先解决主要问题,因为我相信另一个问题更容易解决.
我在滚动的左侧有一个固定的位置div用于菜单.右侧是一个正确滚动的标准div.问题是,当浏览器视口太小而无法看到整个菜单时......没有办法让它滚动我可以找到(至少不用css).我尝试在css中使用不同的溢出,但没有任何东西使div滚动.包含菜单的div设置为min-height:100%和position:fixed ..我需要保留的两个属性.
包含菜单的div 位于另一个绝对定位且高度设置为100%的包装div内.
如果内容对于div来说太高,我怎么能让它垂直滚动？
这导致我另一个问题,我不想要滚动条显示..但我想我可能已经有了答案(只有它还没有工作,因为我不能让div滚动开始).
有解决方案吗 也许需要javascript？(我对此知之甚少)
以及导致问题的相关代码(因为在这里发布整个东西太长了):
.fixed-content {
min-height:100%;
position:fixed;
overflow-y:scroll;
overflow-x:hidden;
}
还尝试添加高度:100%也只是为了看看是否是一个问题,但它也没有工作...也没有固定的高度,如600px.
推荐指数
解决办法
查看次数
CSS:如何获得位置:位置内的绝对div:相对div不会被溢出裁剪:隐藏在容器上
我有3个级别div:
- (在下面绿色)的顶层
div与overflow: hidden.这是因为如果超过框的大小,我希望在该框内部的一些内容(此处未显示)被裁剪. - (在下面红色的)这里面,我也
div有position: relative.唯一的用途是下一级别. - (下面的蓝色)最后一个
div我取出了流程,position: absolute但我想要相对于红色div(而不是页面)定位.
我想将蓝色框从流中取出并扩展到绿色框之外,但相对于红色框定位如下:
但是,通过下面的代码,我得到:
然后移除position: relative红色框,现在蓝色框允许离开绿色框,但相对于红色框不再定位:
有办法:
- 保持
overflow: hidden在绿色框上. - 蓝色框是否扩展到绿色框之外并相对于红色框定位？
完整的源代码,为了测试而使用内联CSS:
#d1 {
overflow: hidden;
background: #efe;
padding: 5px;
width: 125px;
}
#d2 {
position: relative;
background: #fee;
padding: 2px;
width: 100px;
height: 100px;
}
#d3 {
position: absolute;
top: 10px;
background: #eef;
padding: 2px;
width: 75px;
height: 150px;
}推荐指数
解决办法
查看次数
检查元素的内容是否溢出？
检测元素是否溢出的最简单方法是什么？
我的用例是,我想限制某个内容框的高度为300px.如果内部的内容高于那个,我会用溢出来切断它.但如果它溢出,我想显示一个"更多"按钮,但如果不是,我不想显示该按钮.
有没有一种简单的方法来检测溢出,还是有更好的方法？
推荐指数
解决办法
查看次数
CSS边缘恐怖; 边距在父元素之外添加空格
我的css边距不符合我想要或期望的方式.我好像我的标题margin-top会影响它周围的div-tags.
这就是我想要和期望的:
......但这就是我最终的结果:
资源:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Margin test</title>
<style type="text/css">
body {
margin:0;
}
#page {
margin:0;
background:#FF9;
}
#page_container {
margin:0 20px;
}
h1 {
margin:50px 0 0 0;
}
</style>
</head>
<body>
<div id="page">
<div id="page_container">
<header id="branding" role="banner">
<hgroup>
<h1 id="site-title"><span><a href="#" title="Title" rel="home">Title</a></span></h1>
<h2 id="site-description">Description</h2>
</hgroup>
</header>
</div>
</div>
我在这个例子中夸大了边缘.h1-tag上的默认浏览器边距略小,在我的情况下,我使用Twitter Bootstrap,使用Normalizer.css将默认边距设置为10px.不重要,重点是; 我不能,不应该,不想改变h1标签上的边距.
我想这跟我的其他问题类似; 为什么这种CSS margin-top风格不起作用？.问题是我该如何解决这个具体问题？
我已经阅读了类似问题的几个主题,但没有找到任何真正的答案和解决方案.我知道添加padding:1px;或border:1px;解决问题.但这只会增加新的问题,因为我不希望在div标签上有填充或边框.
必须有更好的最佳实践解决方案吗？这一定很常见.
推荐指数
解决办法
查看次数
HTML:如何为长段创建只有垂直滚动条的DIV？
我想在我的网站上显示条款和条件备注.我不想使用文本字段,也不想使用我的整个页面.我只想在选定区域显示我的文本,并且只想使用垂直滚动条向下阅读所有文本.
目前我正在使用此代码:
<div style="width:10;height:10;overflow:scroll" >
text text text text text text text text text
text text text text text text text text text
text text text text text text text text text
text text text text text text text text text
text text text text text text text text text
text text text text text text text text text
text text text text text text text text text
text text text text text text text text text
</div>
两个问题:
- 它不是固定宽度和高度,而是在所有文本出现之前展开. …
推荐指数
解决办法
查看次数
Overflow-x:hidden不会阻止内容在移动浏览器中溢出
我这里有一个网站.
在桌面浏览器中查看,黑色菜单栏正确地仅延伸到窗口的边缘,因为它body具有overflow-x:hidden.
在任何移动浏览器中,无论是Android还是iOS,黑色菜单栏都会显示其全宽,这会在页面右侧显示空白区域.据我所知,这个空格甚至不是html或body标签的一部分.
即使我将视口设置为以下特定宽度<head>:
<meta name="viewport" content="width=1100, initial-scale=1">
该网站扩展到1100px,但仍然有超过1100的空白.
我错过了什么？如何将视口保持为1100并切断溢出？
推荐指数
解决办法
查看次数
溢出:隐藏应用于<body>在iPhone Safari上工作吗？
是否overflow:hidden适用<body>于iPhone Safari？似乎没有.我无法在整个网站上创建一个包装器来实现这一点......
你知道解决方案吗？
示例:我有一个长页面,只是我想要隐藏"折叠"下面的内容,它应该适用于iPhone/iPad.
推荐指数
解决办法
查看次数
css溢出 - 只有1行文本
我有div以下css样式:
width:335px; float:left; overflow:hidden; padding-left:5px;
当我插入div一长串文本时,它会突破到一个新行并显示所有文本.我想要的是只有一行不会换行的文本.当文本很长时,我希望这个溢出的文本消失.
我正在考虑设置高度,但似乎是错误的.
也许如果我添加与字体相同的高度,它应该工作,不会在不同的浏览器中造成任何问题？
我怎样才能做到这一点？
推荐指数
解决办法
查看次数