CSS侧边栏定位和横幅

Question

我正在尝试使用具有100％高度的固定宽度侧边栏，旁边是横幅，该横幅具有固定高度但使用剩余的页面空间量。我尝试了以下，但我似乎无法得到横幅宽度正确...

提前感谢您的任何见解！

S上。

<div id="main">
    <div id="sidebar"></div>
    <div id="banner"></div>
</div>

html, body {
    height: 100%;
}

body {
    padding: 0; 
    margin: 0;
}

div#main {
    width:100%;
    min-height: 100%;
}

div#sidebar {
    float:left;
    position:absolute;
    min-height: 100%;
    width:195px;
    height:100%;
    background-color: rgba(0, 0, 0, 0.8);
}

div#banner {
    position:absolute;
    margin-left:195px;
    top:80%;
    width:100%;
    height:126px;
    background-color: rgba(179, 179, 179, 0.8);
}

更新了屏幕截图

以下是我尝试使用上述代码完成的操作，但横幅占用的空间超过剩余空间并延伸到页面外部，导致横向滚动。

Answer 1

div#main {
    width:100%;
    min-height: 100%;
    position:relative;
    overflow:hidden;
}

应该这样做。

Answer 2

主要问题是横幅宽度为100％，但margin-left为195px。

查看解决方案：http://jsfiddle.net/nW53u/

• 您可以将横幅div的内容包装在另一个div中，然后只提供一些padding-left
• 您使用的是绝对定位，因此您可以使用z-index确保侧边栏位于顶部。

使用绝对定位，如果为您的布局调整浏览器大小，则可能会出现一些不需要的行为。

您可能想要考虑另一种方法。这还取决于将要制定的其他内容。什么是白色空间？

Answer 3

我相信，因为你将横幅设置为100％，无论如何都将其自身设置为页面宽度，并且不会注意侧边栏所占用的空间。

之后你可以用javascript脚本做一些事情来计算页面的剩余大小。或者，如果您查看http://www.alistapart.com/articles/holygrail，他们会创建类似于您使用CSS的内容。希望这会有所帮助。

Answer 4

在

上添加两个属性

ul li a {
position:relative;
top:30px;
}

Working DEMO

Answer 5

注意：如果由于其他原因不需要绝对定位，这将起作用，这只是两列。

还有其他解决方案：

• 你只想让水平卷轴不再用于ie5

  body {overflow：-moz-scrollbars-vertical; overflow-x：hidden; overflow-y：scroll; }

使用以下方法将使用自动值将块级元素（div）缩小到您的内容，同时保持您的固定宽度侧边栏，横幅，以及添加更多内容并展开此内容的可能性。这是对最简单的两列CSS布局之一的轻微改动，您可以做的不同是大多数人将他们的横幅扩展到整个内容区域的顶部。

只读以了解术语NESTED

在以下情况下，嵌套div是div内的div div2是嵌套div

<div class="div1"><div class="div2></div></div>

CSS

/* for centered page or disregard margin settings*/
.container{height: auto; margin: 0 auto;)
/* then nested inside .container have the following two: */
.sidebar(width: 195px; float: left; height: 100%;)
.col{width:  auto; height: 100%;}
/* All of your other elements at this row-level in your document flow should be contained either within .sidebar or .col to start a new row research the CSS clearfix  - not to say you couldn't place as many things as you want in the body column and align them by default relative to its container(.col) but I am saying for more advanced layouts and for layouts that REQUIRE absolute positioniong. Also note the auto width. I left the sidebar width at auto as well. The div will shrinkwrap to its contents. . . as long as they're square */
.banner{vertical-align: top; width: auto; height: auto;)

以div.container

开头的HTML标记

<div class="container">
    <div class="sidebar">
    sidebar contents
    </div>

    <div class="col">
        <div class="banner">
            <img src="path/to/banner.jpg" alt="what you want mouse-over to say" />
        </div>
    </div>
</div>
<!--- Research the CSS clearfix if your document requires the use of floats for a new row a content or if you must use absolute positioning. Absolute positioning is the future and there is specification in CSS3 to bring in an interesting feature that would eliminate grid framework systems. I wish I could find the link but it is basically you assign place-holders to a template and css uses the selectors and place holders using absolute positioning to style the page. In all reality abs positioning is the "ideal" way to do things. It is just not the practical way for most sites atm, nor does it have much to offer for simple layouts. --->
<div class="clearfix"></div>

有经验的人重要的事情告诉你。不要被所有这些漂浮在周围的网格系统所包裹。有些很酷，因为它们提供引导捆绑功能，例如预设排版集，但是，在一天结束时它们（不包括java脚本网格）通常是固定宽度列，具有继承的左边距，容器和左边距类，用于移动对象以与任何网格列对齐。这些对学习很有好处，我认为应该使用标准，但是如果你想让桌面上有巨大视口的人拥有大量精彩的用户体验，那就使用媒体查询。一般来说，规则应该是这样的：“你应该将网格扩展到你的内容，而不是将你的内容扩展到你的网格......但仍然使用某种类型的逻辑网格”元素只是看起来不正确。网格确保这一点，然而，根据自己的喜好定制它。这是一个原则，因为在设计中有吸引人的宽高比，如三分法则。以及其他令人愉悦的自然除数，因此您可能希望根据设计决策将它们实施到您的网格中。