如何使每个屏幕上的全部高度在部分或体内的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屋！