Question

我正在尝试使用骨架框架创建响应式网站布局，但我无法制作一个全高左侧边栏和顶部栏。向我展示一些关于使用或不使用骨架但需要响应的一些想法，这里有一个图像：
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文件获得结果，如我发布的图像？

Answer 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），但它是流畅的宽度和全高，事件卡将根据宽度调整列。

DEMO：JSFIDDLE

Answer 2

我做这样的事情（只为你解决侧栏问题）。首先，您的CSS和HTML需要匹配。您的HTML将侧边栏作为ID，并且您的CSS将其作为一个类。

我发现的一个问题是，您的内容会设置明确的宽度 - 如果您要使用此页面布局（如果我错了，请更正我）{{除了侧边栏，1}}块应该是页面宽度的100％。如果是这样，那么我会添加这个CSS：

#content

它消除了整个身体的溢出并将其恢复到#content区域，提供了可滚动区域和模拟body { overflow: hidden; } #content { width: auto !important; height: 100%; overflow: auto; }左侧边栏。你可以在这里查看：http://jsfiddle.net/zve96/1/

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

fixed

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

CSS全高侧边栏，内容反应灵敏

2 个答案: