[英]Stack div elements in css vertically (with dynamic height)
I'm trying for hours now to get the following working: 我正在努力几个小时才能完成以下工作:
I'd like to have three divs in an container div. 我想在一个容器div中有三个div。
that does not sound so hard does it? 听起来不那么难吗? I just can't figure it out! 我只是想不通!
thanks for your help. 谢谢你的帮助。
something like this may work for you: 这样的事情可能为您工作:
http://jsfiddle.net/nCrEc/1/ http://jsfiddle.net/nCrEc/1/
edit: 编辑:
this version scales with the browser window http://jsfiddle.net/nCrEc/2/ 此版本随浏览器窗口http://jsfiddle.net/nCrEc/2/缩放
html: 的HTML:
<div class="con">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
css: CSS:
.con{width:200px; top:0;bottom:0;left:0; position:absolute;background:#ff0;}
.top{width:200px;height:20px;position:absolute;top:0;left:0;background:#f60;}
.bottom{width:200px;height:50px;position:absolute;bottom:0;left:0;background:#f60;}
.middle{width:200px;min-height:1px; position:absolute;bottom:50px;top:20px;left:0;background:#06f;}
It's easy with Flexbox but it is still being developed and only really works in Chrome at the moment. 使用Flexbox很容易,但它仍在开发中,目前仅在Chrome中有效。
Otherwise, you can use * {box-sizing: border-box;}
to make your life easier. 否则,您可以使用* {box-sizing: border-box;}
使您的生活更轻松。 There is even an IE6-7 polyfill if supporting old browsers is important to you. 如果支持旧的浏览器对您来说很重要,甚至还有IE6-7 polyfill 。
*{-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin:0; padding:0;}
html,body{width:100%; height:100%;}
div{width:100%; background:salmon;}
.middle {background:lightblue; height:100%; padding:100px 0;}
.top, .bottom {height:100px; position: absolute; left:0;}
.top {top:0; }
.bottom {bottom: 0;}
I did something very similar on this website: 我在这个网站上做了非常相似的事情:
http://www.probusllandudno.org.uk/ http://www.probusllandudno.org.uk/
click the dinners 2012 link (and, if using FF web developer, u can use view generated source) 点击2012年的Dinners链接(如果使用FF Web开发人员,则可以使用查看生成的源代码)
The main points are putting the divs in order in the doc, assigning fixed width (in my case) or width=100%, top and botom divs have fixed height see the css 要点是在文档中将div排序,分配固定宽度(在我的情况下)或width = 100%,顶部和底部div具有固定高度,请参见css
ADDENDUM 附录
Another response offers a sophisticated solution that covers issues around most specifically padding.. You haven't specified how your content might influence the solution. 另一个答复提供了一个复杂的解决方案,涵盖了最具体的填充问题。.您尚未指定内容可能如何影响解决方案。 My web page is just centered text 我的网页只是居中文字
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.