3列高度爲100％

-1

我有一個容器div盒包含三個左浮動的div。左側是我的左邊欄，中間是內容區域，右側是右側邊欄。容器高度取決於裏面最大的div。我想要的是，所有三個內部div總是有100％的容器高度。我嘗試了100％高度和100％最小高度，但兩個較小的div盒只能擴展到那裏的大小。3列高度爲100％

我無法將容器高度設置爲100％，因爲在上面和下面有一些其他的東西。

<div id="container"> 
<div id="col1"></div> 
<div id="col2"></div> 
<div id="col3"></div> 
</div>

見jsFiddle

來源

2015-12-30 Verdemis

請添加您的代碼:)您可以使用jsfiddle。 –

請看看這[一]（http://stackoverflow.com/questions/18934141/set-div-height-to-fit-to-the-browser-using-css）。這可能會幫助你。 – tata

Duplicate - http://stackoverflow.com/questions/4804581/css-expand-child-div-height-to-parents-height/4804706#4804706 –

Flexbox，就可以做到這一點。

#container { 
 
    width: 90%; 
 
    margin: 1em auto; 
 
    display: flex; 
 
    border: 1px solid grey; 
 
} 
 
[id*="col"] { 
 
    padding: .25em; 
 
    background: lightblue; 
 
    border: 1px solid green; 
 
    width: 33%; 
 
}

<div id="container"> 
 
    <div id="col1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam natus amet perferendis voluptatibus repudiandae accusamus unde consectetur, veritatis quod dolorem ullam, ipsum odio numquam? Itaque?</div> 
 
    <div id="col2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit ex nihil, eligendi deleniti rem. Quam saepe, tempore nesciunt dignissimos neque quasi tenetur corrupti, rem ipsa sapiente cum tempora excepturi. Dicta eum reprehenderit, soluta esse quibusdam 
 
    quisquam deserunt quidem, quo, quos numquam nisi omnis eius possimus! Rem nulla, molestiae aliquam facere!</div> 
 
    <div id="col3">Lorem ipsum dolor sit.</div> 
 
</div>

來源

2015-12-30 10:45:52

當我使用顯示：flex我的整個設計去地獄XD我想我必須先弄清楚flex是如何工作的。我會檢查出來:) – Verdemis

然後有可能有你沒有告訴我們的東西....是否有更多的HTML比你所指示的...也許有容器中的其他東西？ –

使用此CSS吧：

#container { display: table; } 
#col1, #col2, #col3 { display: table-cell; }

這裏有一個小提琴：https://jsfiddle.net/aL5apudm/ （#container的寬度爲100％，彎曲和浮子取出設置）

來源

2015-12-30 10:46:07 Johannes

我試了一下，但直到現在它不工作。也許我錯過了一些東西。但我會進一步檢查 – Verdemis

它也取決於你的CSS的其餘部分。不要使用浮動或彈性的東西結合這些設置 – Johannes

請在答案中看到小提琴 – Johannes

html

<div class="container"> 
     <div class="l">sdffff<br/>fffffffffffffff<br/>fffffffffffffffffff</div> 
    <div class="c">fffffffff</div> 
    <div class="r">ffffffffffffffffffffffffff</div> 
</div>

CSS

.container{ 
    height:auto; 
    width:700px; 
    background:#ff0; 
    overflow: hidden; 
    position: relative; 
    display: table; 
} 
.l{ 
    width:200px; 
    display: table-cell; 
    background:#ccc; 
} 
.c{ 
    width:200px; 
    display: table-cell; 
    background:#ddd; 
} 
.r{ 
    width:200px; 
    display: table-cell; 
    background:#eee; 
}

demo

來源

2015-12-30 10:53:11 Rasel

成功完成:-D

.table { 
 
    display: table; 
 
    height: 100%; 
 
    border: solid red; 
 
} 
 
.cell { 
 
    border: 2px solid black; 
 
    vertical-align: top; 
 
    display: table-cell; 
 
    height: 100%; 
 
} 
 
.container { 
 
    height: 100%; 
 
    border: 2px solid green; 
 
    -moz-box-sizing: border-box; 
 
}

<div class="table"> 
 
    <div class="cell"> 
 
    <p>Text</p> 
 
    <p>Text</p> 
 
    <p>Text</p> 
 
    <p>Text</p> 
 
    <p>Text</p> 
 
    <p>Text</p> 
 
    <p>Text</p> 
 
    <p>Text</p> 
 
    </div> 
 
    <div class="cell"> 
 
    <div class="container">Text</div> 
 
    </div> 
 
    <div class="cell"> 
 
    <div class="container">Text</div> 
 
    </div> 
 
</div>

來源

2015-12-30 13:00:40

設置在.container側欄的顏色和上.col2主體背景色：

#container { 
    background-color:silver; 
} 
body, #col2{ 
    background-color:white; 
}

硒撥弄https://jsfiddle.net/zuncevka/5/

不同側邊欄的顏色可以通過使用梯度來解決：

#container { 
    background: linear-gradient(to right, #cccccc 0%,#cccccc 20%,#ffffff 20%,#ffffff 80%,#deccde 80%,#deccde 100%); 
}

https://jsfiddle.net/zuncevka/4/

來源

2016-05-04 00:17:14

3列高度爲100％

回答

相關問題