3

大家好，我创建了一个 html 布局，左右两侧有导航菜单，右侧有内容好像

我需要两者都有全高必须到达屏幕底部，即使内容非常低。

现在看起来像

现在

这是我的小提琴

演示

此外，我尝试了 body 和 html 的全高

body, html{
    height:100%;
}
4

4 回答 4

4

（相关） 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%;
}


Running Demo


我曾经normalized.css重置样式并避免将默认边距应用于display: table;div。尝试在演示中删除它（左侧的外部资源菜单）以了解我的意思。

看看这里以阅读有关 CSS 重置的其他内容。

编辑：添加了透明垫片。

于 2013-10-25T22:47:16.880 回答
3

采用 ：

display: table-cell

结果如下：http: //jsfiddle.net/GhxQL/6/

于 2013-08-14T14:34:22.387 回答
0

你的小提琴里有正确的 CSS；你只是在代码中有一些错误。

确保你的 CSS 行以;而不是结尾:——有几行你有冒号而不是分号。并将您的第一行从 更改htm, body为html, body。

更新小提琴：http: //jsfiddle.net/hqkVh/7/

于 2013-10-25T16:22:00.000 回答
0

好的，让我们把方程式变得更难！

因此，如果您有响应式网页设计并且想要同时使用高度和最小高度以及始终 100% 的高度，那会是什么？

如果您使用 HEIGHT 100%，您将无法处理列的所有内容，通过调整浏览器的大小很明显，高度为 100%，并且内容不会完全显示

你可能想从我自己的问题中检查这个解决方案，最小高度解决方案

请考虑这些问题并没有什么不同，只是提问的方式不同

我建议使用 Min-Height 100% 和 Height Auto

于 2013-10-26T00:31:00.237 回答