如何让左右div一直到底部？答案

【问题标题】：How to make right and left div go all the way to the bottom?如何让左右div一直到底部？
【发布时间】：2015-09-02 19:26:47
【问题描述】：

我有一个主页。在 body div 中，我有三个 div，一个右 div，一个左 div 和一个中心 div。在中心 div 我有呈现特定视图的@renderbody。我希望左右 div 高度一直到页脚。如何使侧 div 与中心 div 高度相同，一直到底部到页脚 div。

#body {
    background-color:white;
    margin-left:auto;
    margin-right:auto;
    width: auto;
    padding: 10px;
}

#body-main-left { 
    background-color:rgba(100, 100, 100, 0.1);
    float:left;
    width: 150px;
    height:auto;

}

#body-main-right {
    background-color: rgba(100, 100, 100, 0.1);
    float: right;
    width: 150px;
    height:auto;
}

#body-main-center {
    margin: 0 150px 0 150px;
}
#footer {
    clear: both;
    background-color: black;
    color: red;
}


<div id="container">
    <div id="header">
        <div id="header-banner">
            HeaderBanner image will reside here
        </div>
        <div id='cssmenu'>
            <ul>


<li class='active'>@Html.ActionLink("", "", "")</li>
            <li>@Html.ActionLink("", "", "")</li>
            <li>@Html.ActionLink("", "", "")</li>
            <li>@Html.ActionLink("", "", "")</li>
            <li>@Html.ActionLink("", "", "")</li>
            </ul>
        </div>
    </div>
    <div id="body">
        <div id="body-main-left">Left Block</div>
        <div id="body-main-right">Right Block</div>
        <div id="body-main-center">@RenderBody()</div>
    </div>
    <div id="footer">
        Footer copyright
    </div>
</div>

【问题讨论】：

您已将填充 (10px) 设置为 #body，将底部填充设置为 0 应该会一直到页脚。

标签： html css view

【解决方案1】：

示例：

https://jsfiddle.net/9vd83rww/5/

像这样将padding-bottom: 0px; 添加到#body：

#body {
    background-color:white;
    margin-left:auto;
    margin-right:auto;
    width: auto;
    padding: 10px;
    padding-bottom: 0px;
}

【讨论】：

【解决方案2】：

你可以使用 Flexbox，你的 CSS 可能是这样的：

#body {
    background-color:white;
    display: flex;
    flex-grow: 1;
}

#body-main-left { 
    background-color:rgba(100, 100, 100, 0.1);
    width: 150px;
}

#body-main-right {
    background-color: rgba(100, 100, 100, 0.1);
    width: 150px;
    order: 2;
}

#body-main-center {
    flex-grow: 1;
}

#footer {
    background-color: black;
    color: red;
}

查看demo

【讨论】：