Question

这是代码（与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％heigtht，内容就会溢出。我宁愿让元素扩展。

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

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

这是可能的，还是我应该放弃？

Answer 1

您可以用最小高度替换高度：100％。在HTML的末尾添加一个带有css规则清除的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>

Answer 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。至少现在容器不会溢出身体。

请告诉我这是否有用。

Answer 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);
}

CSS / HTML：处理流体布局和高度？

3 个答案: