1

我正在尝试在具有固定高度但使用剩余页面空间量的横幅旁边设置一个高度为 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);
}

更新了截图

下面是我试图用上面的代码完成的，但横幅占用的空间超过了剩余空间并延伸到页面之外，导致横向滚动。

在此处输入图像描述

4

5 回答 5

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

应该做的伎俩。

于 2012-06-14T13:26:50.107 回答
0

主要问题是横幅的宽度为 100%，但宽度margin-left为 195 像素。

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

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

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

您可能需要考虑另一种方法。这也取决于还会布置什么。空白处是什么？

于 2012-06-14T13:17:39.103 回答
0

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

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

于 2012-06-14T13:18:38.453 回答
0

添加两个属性

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

Working DEMO

于 2012-06-14T13:19:11.153 回答
0

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

还有其他解决方案：

  • 您只希望水平滚动消失，这可以回到 ie5

    身体 { 溢出：-moz-scrollbars-vertical; 溢出-x：隐藏；溢出-y：滚动；}

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

只读以理解术语嵌套

在以下情况下，嵌套 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 脚本网格）通常是固定宽度的列，具有继承的左边距、容器和一个左边距类，用于移动对象以与任何网格列对齐。这些对学习很有好处，我认为应该使用标准，但是如果您希望在桌面上拥有巨大视口的人拥有大量精美的用户体验，请使用媒体查询。一般的规则应该是这样的：“你应该将你的网格缩放到你的内容，而不是你的内容到你的网格......但仍然使用某种类型的逻辑网格” 当元素不是像素完美时，它们看起来就不正确。网格确保了这一点，但是，可以根据自己的喜好对其进行自定义。这更像是一个原则，因为在设计中存在有吸引力的纵横比，如三分法则。以及其他令人赏心悦目的自然除数，因此您可能希望在设计决策时将它们实施到您的网格中。

于 2012-06-14T14:58:31.707 回答