CSS/HTML：处理流畅的布局和高度？答案

【问题标题】：CSS/HTML: Handling Fluid Layouts and Height?CSS/HTML：处理流畅的布局和高度？
【发布时间】：2014-09-26 06:47:25
【问题描述】：

这是代码（与 jsfiddle 相同）：

<body>
    <header>
        <h1>
            Heading
        </h1>
    </header>
    <div id="container">
        <div id="left">
            <h3>
                Left
            </h3>
            <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id. 
            </p>
        </div>

        <div id="main">
            <h3>
                Main
            </h3>

                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id. 


                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id. 
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id. 
            </p>
        </div>
        <div id="right">
            <h3>
                Right
            </h3>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, 
            </p>
        </div>

        <footer id="footer">
            <h3>
                Footer
            </h3>
        </footer>
    </div>

</body>
</html>

html{
    min-height:100%;
    height:100%;
}
body{
    height:100%;
    width:100%;
    margin:0;
    box-shadow: inset 0 0 1px 1px black;
}
h1{ 
    margin-top:0;
}
#container{
    clear:both;
    width:100%;
    height:100%;
    float:left;
    box-shadow: inset 0 0 1px 1px black;
}

#header{
    min-height:12%;
    clear:both;
    float:left;
    width:100%;
    box-shadow: inherit;
}
#footer{
    min-height:10%;
    box-shadow: inherit;
    clear:both;
    float:left;
    width:100%;
}
#left{
    float:left;
    box-shadow: inherit;
    width:24.5%;
    padding:0.5%;
    min-height:50%;
}

#main{
    float:left;
    box-shadow: inherit;
    width:48%;
    min-height:50%;
    padding:0.5%;
}

#right{
    float:left;
    box-shadow: inherit;
    width:24.5%;
    padding:0.5%;
    min-height:50%;
}

如通过查看边框的示例中所见，一旦内容超过 100% 高度，内容就会溢出。我宁愿让元素扩展。

要解决此问题，可以删除指定高度。但是，如果没有指定高度，那么我应该如何控制所有内容的高度？（使用百分比） 我需要设置高度的按钮、页眉、页脚等。（如果没有 100% 高度的 HTML 和 BODY，其他元素将无法使用百分比设置高度）

如果不清楚，我说的是一种流畅的布局，其中高度以 百分比 给出。

那么这是可能的还是我应该放弃它？

【问题讨论】：

标签： html css multiple-columns fluid-layout

【解决方案1】：

您可以将高度替换为最小高度：100%。在您的 HTML 末尾添加一个带有 css 规则 clear: both 的 div 以清除所有浮动元素。

所以它看起来像这样：

<body>
    <header>
        <h1>
            Heading
        </h1>
    </header>
    <div id="container">
        <div id="left">
            <h3>
                Left
            </h3>
            <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id. 
            </p>
        </div>

        <div id="main">
            <h3>
                Main
            </h3>

                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id. 


                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id. 
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id. 
            </p>
        </div>
        <div id="right">
            <h3>
                Right
            </h3>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, 
            </p>
        </div>

        <footer id="footer">
            <h3>
                Footer
            </h3>
        </footer>
    </div>
    <div style='clear:both'></div>
</body>
</html>

【讨论】：

【解决方案2】：

我不完全确定你想在这里做什么，但是这个怎么样？

http://jsfiddle.net/9X8j2/

只有 CSS 改变了：

body{
    width:100%;
    margin:0;
    box-shadow: inset 0 0 1px 1px blue;
}
h1{ 
    margin-top:0;
}
#container{
    width:100%;
    box-shadow: inset 0 0 1px 1px gray;
}

#header{
    min-height:12%;
    clear:both;
    float:left;
    width:100%;
    box-shadow: inherit;
}
#footer{
    min-height:10%;
    box-shadow: inherit;
    clear:both;
    width:100%;
}
#left{
    float:left;
    box-shadow: inherit;
    width:24.5%;
    padding:0.5%;
    min-height:50%;
}

#main{
    float:left;
    box-shadow: inherit;
    width:48%;
    min-height:50%;
    padding:0.5%;
}

#right{
    float:left;
    box-shadow: inherit;
    width:24.5%;
    padding:0.5%;
    min-height:50%;
}

我更改了盒子阴影的颜色，以便更容易区分它们。

删除大部分高度属性可能是您想要的......包括删除 HTML 标记上的 CSS。至少现在容器不会溢出身体。

如果这有帮助，请告诉我。

【讨论】：

嗨，不幸的是，这只是部分解决方案：通过删除高度，子元素将无法使用带有百分比的高度属性。例如，在此代码中，#right 等元素的最小高度无效。我想要的是改变元素高度（使用百分比作为值）的方法。

【解决方案3】：

我认为您所追求的是 100% 的流体宽度和 100% 的高度，以便内容垂直和水平扩展。这是一件很难的事情，不能单独用 css 完成，flexbox 可能可以做到，虽然我不知道。我最近看到它是用 CSS 和 jQuery 在页眉和页脚上使用固定高度完成的，但其余的是可变的高度和宽度：

http://codepen.io/anon/pen/EsJHu

我在这里让它更具响应性：http://jsbin.com/momep/7/edit

CSS

/* Reset  */
* { 
    margin: 0;
    padding: 0;
}


/* Sticky footer */
html, body {
    height: 100%;
    width: 100%;
}
#page {
    height: 100%;
    height: auto !important;
    min-height: 100%;
}
#sticky-footer-wrap {
    overflow: auto;
    padding-bottom: 100px;
}
.site-main {
    overflow: hidden;
    height: 100%;
}
.site-footer {
    position: relative;
    height: 100px;
    margin-top: -100px;
    clear: both;
}


/* Header  */
.site-header {
    height: 100px;
}

@media (min-width:992px) {
/* 3 columns */
#primary {
    float: left;
    width: 50%;  
    margin-left: 25%;
}
#secondary {
    float: left;
    width: 25%;
    margin-left:-75%;
}
#tertiary{
    float: left;
    width: 25%;
}
}

/* Colours */
.site-header {
    background: #C5E0DC;
}
#primary {
    background-color: #F1D4AF;
}
#secondary {
    background-color: #ECE5CE;
}
#tertiary{
    background-color: #E08E79;
}
.site-footer {
    background: #774F38;
}

HTML

<div id="page">
    <div id="sticky-footer-wrap">
        <header class="site-header">
            <h3>Header</h3>
        </header>
            <div class="site-main">
            <div id="primary">
            <h2>Primary content</h2>
            <h1>Layout Features</h1>
            <ul>
                <li>Header (fixed height)</li>
                <li>3 fluid columns</li>
                <li>100% or full height columns (jQuery)</li>
                <li>Sticky footer (fixed height)</li>
                <li>Correct source order of columns</li>
                <li>IE8 compatible (Modernizr)</li>
            </ul>
            </div>              
            <div id="secondary">
                <h3>Secondary content</h3>
            </div>
            <div id="tertiary">
                <h4>Tertiary content</h4>
            </div>
        </div>
    </div>
</div>
<footer class="site-footer">
    <h3>Footer (sticky)</h3>
</footer>

jQuery

// On page load
$(window).load(columnHeight);

// On window resize
$(window).resize( function () {
    // Clear all forced column heights before recalculating them after window resize
    $("#primary").css("height", "");  
    $("#secondary").css("height", "");
    $("#tertiary").css("height", "");
    columnHeight();
});

// Make columns 100% in height
function columnHeight() {
    // Column heights should equal the document height minus the header height and footer height
    var newHeight = $(document).height() - $(".site-header").height() - $(".site-footer").height() + "px";
    $("#primary").css("height", newHeight);
    $("#secondary").css("height", newHeight);
    $("#tertiary").css("height", newHeight);
}

【讨论】：

是的，如果没有 javascript，这似乎是不可能的...... :( 虽然这不是我想要的，但仍然......
我从 99 年就开始工作了，没有实际的桌子，几乎不可能让它工作。我有一个在 FireFox 中运行良好，但 Chrome 无法运行，这与您的不一样，但很烦人。