Question

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

简而言之......我正在编码this，左栏落在浏览器窗口越小的位置。

全屏视图

fullscreen view

纵向视图

**portrait view**

电话视图

phone view

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%;
}

Answer 1

身高：100％永远不会对我有用，但让我们假设它。我认为你可以使用百分比宽度和每个列的float：left。

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

Answer 2

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

如果您像上面的代码中一样使用18em这样的显式宽度值，我认为您很难对其进行响应管理。至少，直到你指定每个brea kpoint所需的分辨率。

Answer 3

我能够让它工作，以便每个垂直列都可以拥有它自己的垂直溢出滚动条，并且还可以使列浮动（这样可以使用html轻松添加它们）。响应部分不在演示中。

Check out the jsbin here.

感谢您的评论/建议/想法！

响应式CSS，列设置为100％高度

3 个答案: