我打算有一个流体高度标题,中间内容部分扩展到可用高度,页脚固定在底部。像这样:
<html>
<body>
<header>
<h1>Bacon ipsum dolor sit amet salami</h1>
<h2>ribs tongue cow </h2>
</header>
<article>
<div class="content">content</div>
<div class="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Rage_Against_The_Machine.jpg/250px-Rage_Against_The_Machine.jpg" />
</div>
<div class="clear"></div>
</article>
<footer>
<h3>read more</h3>
</footer>
</body>
</html>
CSS
body {
height:100%;
}
article {
position:relative;
overflow:hidden;
height: 100%;
background-color: grey;
}
header {
background-color:red;
}
.clear {
clear:both;
}
footer {
position:absolute;
bottom:0;
left:0;
right:0;
background-color:blue;
height:64px;
}
.content {
position:relative;
height:100%;
background-color:pink;
overflow:hidden;
max-width : 66%;
float:left;
}
.image {
float:left;
width: 34%;
position:relative;
right:0;
}
要求:
据我所知,我不能将div的高度拉伸到它的绝对孩子的高度,是否有任何技巧可以让我获得所需的布局?
我的问题: 编辑:三星Galaxy S3上的默认WebView浏览器不支持flexbox,这实际上可以在Chrome上运行。
答案 0 :(得分:1)
你遇到的问题来自你使用花车和绝对位置。这两种方法从未用于此类布局,不再是最佳实践。
我在下面重写了你的演示以使用display:inline-block
,这也不适用于这种布局,但它是解决此类问题的更好解决方案,也是目前的最佳做法。
DEMO:http://jsbin.com/efEGukar/4/edit?output
flexbox
属性集专门针对此类布局而设计,是一种非常好的解决方案,可让您更好地控制网站对不同屏幕尺寸的反应。但是,浏览器仍然在增加支持,但它还没有普及:see the current list here。这是未来的最佳实践,所以如果你正在学习CSS,请采用这种方法。
答案 1 :(得分:0)
我相信您正在看内容区域的滚动条(即使有溢出:隐藏)。我认为这是问题所在。您可以通过将overflow:hidden应用于body来解决此问题。这应该避免滚动条。