我正在尝试使用骨架框架创建响应式网站布局，但我无法制作全高的左侧边栏和顶部栏。
告诉我一些关于制作它有或没有骨架但必要的响应的想法，这里有一张图片:
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>
这是我所做的工作的 fiddle :http://jsfiddle.net/zve96/ .
我的问题是关于如何制作 css 文件以获得我发布的图像中的结果？
最佳答案
我会做这样的事情(只是为你解决侧边栏问题)。首先，您的 CSS 和 HTML 需要匹配。您的 HTML 将边栏作为 ID，而您的 CSS 将其作为类。
我看到的一个问题是您的内容设置了明确的宽度——如果您要使用此页面布局(如果我错了请纠正我)您的#content block 应该是除侧边栏之外的页面宽度的 100%。如果是这样的话，那么我会添加这个 CSS:
body {
overflow: hidden;
}
#content {
width: auto !important;
height: 100%;
overflow: auto;
}
这会消除整个主体的溢出并将其恢复到#content 区域，提供可滚动区域和模拟的固定 左侧边栏。您可以在这里查看: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/
关于CSS 全高侧边栏，内容响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22459174/