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％

回答

相关问题