堆棧內存溢出
  簡體   English   中英

CSS / HTML：處理流體布局和高度？

[英]CSS/HTML: Handling Fluid Layouts and Height?

 原文  2014-08-03 18:28:40  4   3    html/ css/ css3/ multiple-columns/ fluid-layout

問題描述

這是一個演示此問題的示例： http : //jsfiddle.net/93twL/

這是代碼（與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％，內容就會溢出。 我寧願元素擴展。

要解決此問題，可以刪除指定的高度。 但是，如果未指定高度，那么我應該如何控制所有內容的高度？（使用百分比）我需要設置高度的按鈕，頁眉，頁腳等。 （如果沒有HTML和BODY具有100％的高度，則其他任何元素都無法使用百分比來設置高度）

如果不清楚，我正在談論一種流體布局，其中高度以百分比給出。

所以這有可能還是我應該放棄呢？

3 個解決方案

解決方案1
 0  2014-08-03 19:11:58

您可以將高度替換為最小高度：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>

解決方案2
 0  2014-08-03 19:31:27

我不確定您要在這里做什么，但是這又如何呢？

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%;
}

我更改了框陰影的顏色，以使它們更容易區分。

刪除大多數的height屬性可能就是您想要的..包括刪除HTML標簽上的CSS。 至少現在容器不會溢出主體。

請告訴我這是否有幫助。

解決方案3
 0 已采納  2014-08-03 20:44:43

我認為您所追求的是流體寬度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);
}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 100％高度的流體布局？ CSS Fluid布局 流體布局的CSS背景圖像 HTML 和 CSS 流體圈 CSS 100％流體高度異常 流體高度受限圖像HTML 使img流暢HTML / CSS HTML CSS流體布局不起作用 HTML / CSS布局上的流暢DIVS 具有3行的HTML + CSS布局，中間行的流體被固定在高度固定的行之間
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM