html - 带标题的 2 列流体布局

Question

我已尝试清楚地描述我的问题。如果我遗漏了什么或者我应该澄清，请发表评论。

问题

我正在尝试创建一个具有一些功能的非常简单的 HTML/CSS 布局。

我尝试添加这些:

• 未知高度的标题
• 内容溢出时可以滚动的内容 div
• 一个侧边栏，如果内容溢出可以滚动

我尝试过的

这是我到目前为止尝试过的方法

body,html { width: 100%; height: 100%; margin: 0; }
#header {
  text-align: center;
  padding: 1rem;
  background-color: #AAA;
}
#main-content {
  margin-right: 25%;
  background-color: #CAC;
  height: 100%;
  max-height: 100%;
}
#sidebar {
  width: 25%;
  float: right;
  padding: 0 0 0 15px;
  background-color: #ACA;
  height: 100%;
}

<div id="header">
  Header
</div>

<div id="sidebar">
  Sidebar (coming over "Inner Content")
</div>

<div id="main-content">
  Inner Content. 100% causes a scrollbar to get added to the whole page
</div>

(坏)图片

限制

• 我正在努力使它易于修改，这样任何诸如边距 + 绝对定位之类的 hack 都不会起作用。

• 我正在避免表格标签。

• 没有 JavaScript

支持

我支持所有现代浏览器 (IE10+)

Answer 1

你应该使用 flexbox。它是为创建像这样的灵活布局而制作的。唯一需要注意的是，由于您希望页眉具有可变高度，因此您需要使用嵌套的 flexbox ，这意味着您需要为主要内容和侧边栏添加一个父元素。

这是代码(Javascript 仅用于“填充”按钮——它填充内容以便可以测试滚动条):

window.onload = function () {
    var btn = document.querySelector("#fill");
    btn.onclick = function () {
        var content = btn.parentNode;
        content.removeChild(btn);
        for (var i = 0; i < 7; i++) {
            content.innerHTML += content.innerHTML;
        }
    };
};

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
}
body {
    display: flex;
    flex-direction: column;
}
#header {
    flex: 0 0 auto;
    text-align: center;
    padding: 1rem;
    background-color: #AAA;
}
main {
    flex: 1;
    display: flex;
}
#main-content {
    flex: 75%;
    overflow: auto;
    padding: 15px;
    background-color: #CAC;
}
#sidebar {
    flex: 25%;
    padding: 15px;
    background-color: #ACA;
}

<div id="header">Header<br>Auto height</div>
<main>
    <div id="main-content">
        Inner Content. 100% causes a scrollbar to get added to the whole page<br>
        <button id="fill">Fill content</button>
    </div>
    <div id="sidebar">Sidebar (coming over "Inner Content")</div>
</main>