列设置为 100% 高度的响应式 CSS答案

【问题标题】：Responsive CSS with columns set to 100% height列设置为 100% 高度的响应式 CSS
【发布时间】：2014-03-11 20:11:42
【问题描述】：

设置垂直列页面布局并想知道您对在 html/css 中实现此目的的最佳方法有何看法。下面是一些 html 和 css 入门代码，但我正在寻找一些帮助，以使列以 100% 的高度并排排列？这也是一个全屏（宽度）响应式流体布局，左侧导航列具有固定宽度。

简而言之...我正在编写this 编码，浏览器窗口越小，左侧列就会脱落。

全屏视图

纵向视图

手机视图

HTML

<body>
<nav role="navigation">
    nav
</nav>
<main role="site">
    <article role="nav">
        list
    </article>
    <article role="main">
        content
    </article>
</main>
</body>

CSS

nav[role=navigation]{
background-color: #aaa;
height: 100%;
width: 18em;
}
main{
width: 100%;
}
article[role=nav]{
background-color: #ddd;
height: 100%;
}
article[role=main]{
background-color: #efefef;
height: 100%;
}

【问题讨论】：

codereview.stackexchange.com
还没有代码需要查看，上面只是为了让你明白我在说什么。
不工作。我正在寻找 html/css 中的解决方案来执行图片中的操作。
我不知道您在 HTML / CSS 方面的经验如何，所以我会从广义上开始：您将要在每个断点处使用 @media queries 来处理不同的视图.关于 3 列布局，请查看 StackOverflow 的 this question 以获取一些有用的信息。

标签： html css responsive-design multiple-columns

【解决方案1】：

height:100% 从不适合我，但让我们假设它确实有效。我认为您可以对每列使用百分比宽度和 float:left。

由于响应式设计允许您为不同的屏幕尺寸指定 css，因此您可以更改百分比并使列 display:none 用于不同的屏幕尺寸范围。

【讨论】：

简而言之...我正在编码this，浏览器窗口越小，左列就会脱落。

【解决方案2】：

这个 JSFiddle 并不完全符合您的要求，但很接近。它完成了将侧边栏 div 固定到左边缘的工作。

我认为如果您像上面的代码中那样使用像 18em 这样的显式宽度值，那么您将很难响应地管理宽度。至少，它会在您指定每个断点处所需的分辨率之前。

【讨论】：

左导航是固定的，而主导航是流动的。这就是为什么将 html 设置为两个部分而不是三个部分的原因。在全屏时，我希望显示左导航，但在较低的断点时，我将把它作为 js 侧抽屉显示出来。我希望将导航修复为一个明确的值，并将 main 设置为剩下的 100%。然后我会边走边找出断点。
顺便说一句 - 你的 jsfiddle 没有显示在列中（至少没有在 safari 中）。
@Jeffrey 我知道；不幸的是，我没有时间让代码完全按照你的意愿工作，但我认为我在 JSFiddle 中拥有的是一个好的开始（它将侧边栏与两个 div 分开并将其以 100% 的高度贴在一边）满足你的要求。
我让它有带有滚动条的垂直列，但第三列不允许背景颜色达到 100% 高度。还使用负边距而不是浮点数，所以不幸的是，动态添加一个额外的列会很痛苦。你有解决这些问题的办法吗？ Demo on jsbin
终于搞定了。 See it on jsbin。谢谢大家！

【解决方案3】：

我能够让它工作，这样每个垂直列都可以有它自己的垂直溢出滚动条，而且这些列是浮动的（这样它们就可以很容易地用 html 即时添加）。响应部分不在演示中。

Check out the jsbin here.

感谢大家的 cmets/建议/想法！

【讨论】：