html - 复杂的 HTML/CSS 布局

Question

我从事 Web 开发已经有一段时间了，但这是我从未真正做过的事情，到目前为止，我的进步使用了一些非常复杂的方法。以下是我想要的布局，但是这个布局有规则，我稍后会解释。

    ----------------------------------------------------
    |                      HEADER                      |
    ----------------------------------------------------
     ________   _______________________________________
    |        | |                                       |
    |        | |                                       |
    |        | |                                       |
    |        | |                                       |
    |        | |                                       |
    |        | |                                       |
    |        | |                                       |
    |        | |                                       |
    |________| |                                       |
               |                                       |
               |                                       |
               |                                       |
               |                                       |
               |                                       |
               |_______________________________________|

侧边栏和标题是静态的，正文也是，但是您可以滚动正文。在主体部分的容器上使用 CSS 属性 overflow:scroll 不是一种选择。原因是它是一个使用 maintainpositiononscrollback 的 ASP.NET 应用程序，这意味着 浏览器 滚动条 - 而不是包含滚动条 - 用于记录 x 和 y 位置。我已经实现了这一点，但使用了一些并不漂亮的复杂布局技术。

所以我的 HTML 如下所示:

<div id="header">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="#">Telephone</a></li>
    <li><a href="#">My Department</a></li>
    <li><a href="#">My Profile</a></li>
  </ul>
</div>

<div id="sidebar-container">
  <div id="sidebar">
    <!-- sidebar code using ul's and li's -->
  </div>
</div>

<div id="content-top-border"></div>
<div id="content-left-border"></div>

<div id="content-wrap">
  <div id="content">
    <asp:ContentPlaceHolder ID="MainContent" runat="server" />
  </div>
</div>

<div id="content-right-border"></div>
<div id="content-bottom-border"></div>
<div id="bottom-block"></div>

所以我出于特定原因使用了所有这些 div，因此我可以绝对地在内容区域上定位边框。其余的 div 实际上通过更改它们的背景颜色来屏蔽内容，这样您在滚动时就看不到内容了。

我的 CSS 文件太大，无法在这里发布，但总体思路如下:

div#header {
    height:30px;
    background-color:#d7d7d7;
    position:fixed;
    top:0;
    left:0;
    right:0;
}

div#sidebar {
    position:fixed;
    top:30px;
    left:0;
    overflow:auto;
    bottom:4px;
    width:148px;
    background-color:#d7d7d7;
}

div#sidebar ul {
    border:1px solid #9a9a9a;
    border-bottom:0;
    font-family:Tahoma;
    margin:0 0 0 4px;
    padding:0;
    list-style-type:none;
    font-size:0.75em;
    width:137px;
    clear:both;
    background-color:white;
}

所以你可以从侧边栏看到，我设置了一个固定的宽度，设为position:fixed然后设置背景。含 <ul>具有固定宽度，因此会导致阻塞。当您水平滚动页面时，内容会在碰到侧边栏时隐藏。这会产生与任何客户端应用程序非常相似的效果。

#content-wrap {
    position: absolute;
    top: 30px;
    bottom: 15px;
    left: 147px;
    right:0;
    background-color:#d7d7d7;
    z-index:-998;
}

#content {
    z-index:-995;
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    padding:10px 10px 20px 10px;
    background-color:#FFF;
    color:#292929;
}

因此您可以看到#content 具有绝对定位，将其保留在该内容框中。内容框外的任何内容都不会显示，即使您水平或垂直滚动​​也是如此。

有更好的方法吗？做一些非常简单的事情似乎有很多 HTML/CSS。

编辑:这种布局没有任何问题。那部分甚至都不难。难的是用复杂的布局来维护简单的 HTML/CSS，我所说的复杂并不是说我无法实现。我已经达到了预期的效果，我只是在寻找更好的方法。

编辑:这是基于业务需求，我别无选择:)

Answer 1

固定位置元素对我来说通常是一个警告标志——将内容从文档流中移除，您将失去 CSS 的主要优势之一，即灵 active 。同样，通过混合 px 和 em 测量，您正在创建一个稍微困惑的样式表卡纸，不允许轻松调整页面大小。

然而，核心问题似乎是您在方法和结果方面是否树对了树。您必须使用 ASP.NET 的 maintainpositiononscrollback 选项吗？实现一些简单的 javascript 以在溢出的 div 上创建等效效果不会太难。如果您受困于 asp.net 代码，您是否必须将文本放在这样的小框中，或者您是否可以让页面与内容一样长？

如果您必须使用 maintainpositionscrollback 并且您必须将内容放在一个小盒子中，那么您最好使用一些不太符合标准的代码来标记- 也许将内容放在 iFrame 中会给您带来您正在寻找的行为。如果您为了实现您想要的设计而失去了语义 html 和 css 的大部分好处，那么您不会通过采用不同的设计方法来牺牲更多。