如何使每个屏幕上的全部高度在部分或体内的div? [英] How to making full height on every screen for section or div inside body?
问题描述
所有我创建了一个html布局,左右两边有一个导航菜单,右边有内容
Hi all am created a html layout having two sides left and right left one having navigation menu and right having contents
我需要两个全高都要来到屏幕底部,即使有非常低的内容。
i need both has full-height has to come to bottom of the screen even there is very low contents.
现在看起来像
这里是我的小提琴
此外,我尝试了全身高度和html到
moreover i tried full height for body and html to
body, html{
height:100%;
}
推荐答案
HTML:
<div class="wrapper">
<div class="left">
<!-- stuff -->
</div>
<div class="spacer"></div>
<div class="right">
<!-- stuff -->
</div>
</div>
(相关) CSS:
body, html {
height : 100%;
}
.wrapper {
width : 600px;
display : table;
margin : 0 auto;
height : 100%;
}
.left, .right {
display : table-cell;
}
.left {
width : 30%;
}
.right {
width : 65%;
}
.spacer {
display : table-cell;
background : transparent;
width : 5%;
}
我使用了 normalized.css
以重置样式,并避免应用于 display:table;
div的默认边距。尝试在演示中删除它(左侧的外部资源菜单)以查看我的意思。
I used normalized.css
to reset the styles and avoid the default margins otherwise applied to the display: table;
div. Try removing it on the demo (External Resources menu on the left) to see what I mean.
Take a look here to read something else on CSS Resets.
EDIT :添加了透明间隔符。
EDIT: added the transparent spacer.
这篇关于如何使每个屏幕上的全部高度在部分或体内的div?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!