html - 3列布局需要等高

标签 html css layout

<分区>

我想使用一个简单的布局,侧边栏、副边栏和主要内容,所有列的高度都需要相同。这是我感到困惑的时候,如果列为空,则列需要为最小屏幕高度,如果 1 列有元素/内容,则其他列需要具有相同的高度。

//想法

<div id="container">

    needs to be min-heigth 100%

    <div id="sidebar">

        needs to be 40px width

    </div>
    <div id="subsidebar">

        needs to be 200px width

    </div>
    <div id="content">

        needs to be 100% width
        <div class="some-element-is-3000">
            3000px height(example)
        </div>
    </div>
</div>

最佳答案

尝试下面的 fiddle 。它使用 display:table;display:table-cell;:

CSS

html,body,#container{
    width:100%;
    height:100%;
}
#container{
    display:table;
}
#sidebar,#subsidebar,#content{
    border:1px solid black;
    display:table-cell;
}
#sidebar{
    min-width:40px;
}
#subsidebar{
    min-width:200px;
}
#content{
    width:100%;
}
  1. 摆弄所有三个内容较少的 div Fiddle

  2. 调整超过窗口高度的内容 div Fiddle

关于html - 3列布局需要等高,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21888849/

上一篇:html - 如何对齐两个相邻的 div,一个包裹文本,另一个填充其余部分?

下一篇:css - HTML5 不允许链接外部样式表?

相关文章:

javascript - 修复底部的div。 (不使用javascript)

javascript - 尝试使用 jQuery 获取表中 img src 和 'star rating' 列的选择器

HTML 字符编码

javascript - 在 div 容器中显示错误消息以使用 Jquery 进行验证

jquery - CSS 和 jQuery slider 高度/定位问题

WPF 使用名称删除网格布局子项

html - 标题的 CSS 问题以及表格和页面边框之间缺少正确的空格

html - 如何将自定义波浪形分隔线添加到部分

Javascript?查询?无法更改 Tumblr 帖子的宽度

html - 您可以将本地主机托管的网站下载为PDF吗?