CSS 全高侧边栏，内容响应答案

【问题标题】：CSS full height sidebar, content responsiveCSS 全高侧边栏，内容响应
【发布时间】：2014-04-22 22:36:35
【问题描述】：

我正在尝试使用骨架框架创建响应式网站布局，但我无法制作全高左侧边栏和顶部栏。告诉我一些关于制作有或没有骨架但必要的响应的想法，这里有一张图片：
http://i.stack.imgur.com/wZTCL.png
示例代码：

<html>
    <body>
    <div id="nav"> This is the navigation menu as shown in the picture below, including the logo</div>
    <div id="topbar"> This is the top search/login bar </div>
    <div id="content">
        <div id="event"> Event card </div>
    </div>
    </body>
</html>

这是我所做的工作的小提琴：http://jsfiddle.net/zve96/。
我的问题是如何制作 css 文件以获得我发布的图片中的结果？

【问题讨论】：

其实这种布局方式非常适合移动端——我要做的就是去除body元素的溢出，并将其添加到内部内容中。
是的，但我不知道如何弄清楚这个布局..每次我尝试在浏览器中制作它时，我都会得到完全不同的东西..
尝试使用一些代码设置一个示例——如果您希望人们帮助您，这是一个很好的起点。
我用一个 html 示例更新了我的问题 :)
嗯，我明白你想要做什么，我有一个可行的例子，但我想看看你尝试了什么——不仅仅是你拥有的元素。

标签： css design-patterns layout responsive-design

【解决方案1】：

希望这会有所帮助，如果您需要我进行调整，请告诉我。

CSS：

html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    height: 100%;
}
#topbar {
    width: 100%;
    height: 100px;
    background: yellow;
}
#nav {
    float: left;
    width: 200px;
    height: 100%;
    background: red;
}
#content {
    width: 100%;
    height: 100%;
    margin-left: 200px;
    background: blue;
    padding: 10px;
}
.event-card {
    float: left;
    margin: 10px;
    background: green;
    width: 150px;
    height: 150px;
}

HTML：

<div id="topbar"> </div>
<div id="nav"> </div>
<div id="content">
    <div class="event-card"> </div>
    <div class="event-card"> </div>
    <div class="event-card"> </div>
    <div class="event-card"> </div>
    <div class="event-card"> </div>
</div>

不一定是“响应式”（为此使用media queries），但它是可变宽度和全高，事件卡片会根据宽度调整列。

演示：JSFIDDLE

【讨论】：

【解决方案2】：

我会做这样的事情（只是为你解决侧边栏）。首先，你的 CSS 和 HTML 需要匹配。您的 HTML 有侧边栏作为 ID，而您的 CSS 有它作为一个类。

我看到的一个问题是您的内容上设置了明确的宽度 - 如果您要使用此页面布局（如果我错了请纠正我）您的 #content 块应该是 100%除了侧边栏之外的页面宽度。如果是这种情况，那么我会添加这个 CSS：

body {
    overflow: hidden;
}
#content {
    width: auto !important;
    height: 100%;
    overflow: auto;
}

这会消除整个正文的溢出并将其恢复到#content 区域，提供可滚动区域和模拟的fixed 左侧边栏。你可以在这里查看：http://jsfiddle.net/zve96/1/

另一种方法类似，但使用绝对定位。 CSS 看起来像：

html, body {
    height: 100%;
    overflow: hidden;
    position: relative;
}
#nav {
    background: #777;
    bottom: 0;
    left: 0;
    position: absolute;
    top: 0;
    width: 150px;
}
#topbar {
    background: #333;
    height: 40px;
    left: 150px;
    position: absolute;
    right: 0;
    top: 0;
}
#content {
    bottom: 0;
    left: 150px;
    overflow: auto;
    position: absolute;
    right: 0;
    top: 40px;
}

你可以在这里查看这个：http://jsfiddle.net/7Sk7j/

【讨论】：