简单的 CSS MasterPage 布局

Question

我很无奈，尽我所能理解 CSS，但它不适合我。

我想做一个非常简单的MasterPage：

• 顶部是一个全宽和全高 40px (1) 的 div
• 在底部还有一个全宽和全高 40px (2) 的 div
• 在中间：
  • 左侧：一个宽度为 200 像素的 div (3)
  • 在左侧div的右侧：一个带有contentPlaceHolder(4)的div

我想要得到的是：如果我创建一些使用我的母版页的网站并在 contentPlaceHolder 中放置一个宽度为 800 像素的面板，我希望我的网站能够适应它 - 顶部、中间和底部 div它们的宽度为 1000px (200 + 800)。如果我调整（缩小）浏览器窗口的大小，我也不希望（我有一个很大的问题）（4）向下移动 - 我希望所有的 div 都被阻止。

这是我的母版页 html：

<div>
    <div class="header">
    </div>
    <div>
        <div class="links">
        </div>
        <div class="content">
        </div>
    </div>
    <div class="footer">
    </div>
</div>

我必须编写什么样的 CSS 才能使它最终起作用？

Answer 1

不确定您是否已签入，但我们使用YUI-Grids CSS Framework 进行布局。它使我们不必在 CSS 上花费大量时间，而我们作为开发人员并不擅长。

甚至还有一个grid builder 可以让您以图形方式布局页面，然后复制并粘贴所需的 HTML 以实现它:)

Answer 2

为防止浮动 div 被“挤压”出您想要的对齐方式，您通常使用 width 或 min-width。

例如，在这段代码中，包含链接和内容的 div 永远不会小于 1000 像素。如果屏幕小于 1000 像素，则会显示滚动条。

<div style="min-width: 1000px">
    <div class="links"></div>
    <div class="content"></div>
</div>

你也可以用 width 代替 min-width:

<div style="width: 1000px">
    <div class="links"></div>
    <div class="content"></div>
</div>

两者的区别很简单：如果你指定了 min-width，那么 div 可以在需要时变大。如果您指定宽度，则 div 将是您指定的大小。

请注意，IE6 不支持 min-width。

Answer 3

这里是针对此问题的特定 CSS/标记的快速说明。

标记：

<!-- Header, etc. -->
<div class="contentView">
    <div class="links">
    </div>
    <div class="content">
    </div>
</div>
<!-- Footer, etc. -->

CSS：

.contentView {
    /* Causes absolutely positioned children to be positioned relative to this object */
    position: relative;
}

.links {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
}

.content {
    padding-left: 200px;
}

您可能希望页脚具有“粘性”。在此处查看相关信息：http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

这是否合适取决于设计的要求。这使得链接部分更像是左侧的浮动框，而不是列。

最终看起来像这样（.content 是绿色，.links 是红色）：