复杂的HTML/CSS布局

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

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

边栏和标题是静态的，主体也是静态的，但是您可以滚动主体。使用CSS属性overflow:body节的容器上的滚动不是一个选项。原因是它是一个ASP.NET应用程序，使用MaintainPositionsCrollback，这意味着浏览器滚动条（而不是包含滚动条）是用来记录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>

从侧边栏可以看到，我设置了一个固定的宽度，使其

position:fixed

，然后设置了一个背景。包含的

具有固定的宽度，因此导致阻塞。当您水平滚动页面时，当它点击侧边栏时，内容将被隐藏。这会产生一种与任何客户端应用程序非常相似的效果

#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;
}

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

有更好的方法吗？做一些非常简单的事情似乎需要大量的HTML/CSS

编辑：此布局完全没有问题。那部分甚至不难。困难的是用复杂的布局维护简单的HTML/CSS，我所说的复杂并不是指我无法实现的东西。我已经达到了预期的效果，我只是在寻找更好的方法

---

编辑：这是基于业务需求，我没有选择：）

您可以使用标记和css，稍微调整它以满足您的需要吗

---

希望这对我有所帮助

我会使用

位置：固定

，适当的边距和宽度/高度

固定位置元素对我来说通常是一个警告信号-如果从文档流中去掉一些东西，你就会失去CSS的一个主要好处，那就是它的灵活性。同样，通过混合px和em测量，您创建了一个稍微混合的样式表阻塞，不允许轻松调整页面大小

然而，中心问题似乎是你在方法和结果方面是否正确的问题。您必须使用ASP.NET中的MaintainPositionScrollBack选项吗？实现一点轻量级javascript来在溢出的div上创建一个等效效果并不难。如果您一直使用asp.net代码，那么您是必须将文本放在这样的小框中，还是可以让页面与内容一样长

---

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

是的，已经设置了边距。布局其实不是问题，只是看看是否有其他方法可以从标题/侧边栏区域隐藏溢出的内容。嗯，有了正确的边距/填充/尺寸标注，你的内容不应该像你描述的那样溢出。当我有机会看到你的错误时，我会加载你的代码。基本上，当我滚动内容区域内的任何内容时，内容区域外的任何内容都不应可见。它的工作原理非常类似于Outlook之类的客户端应用程序。无论是垂直滚动还是水平滚动，只有内容区域会滚动。这就像使用overflow:scroll。是的，这是一种相当常见的设置：我在自己的网站上做的基本相同的事情。我怀疑这只是调整了一两处房产，只是在工作时没有时间详细查看。我一定是误解了，我的道歉只是想帮上忙。我道歉，我并不是有意让自己看起来有点不对劲——我有时不看我写的东西。我完全理解将标准化标记作为web应用程序的基础是一个好主意，但是，这确实是一个完全不同的场景。请从您的链接中发布特定代码，这样这个答案将继续为网站增加价值。否则，这个答案可能会被否决或删除。我已经提出了所有非常合理的关切。不幸的是，这是一个“我们不改变，尽管它是多么愚蠢”的悲哀。我真希望我能听从你的建议，但这不是一个选择。我不介意看到一个溢出div的轻javascript示例，我手头没有代码，但原则是将div的滚动位置放入一个隐藏的表单字段中，然后在加载时检索它，有点像但cookie较少

#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;
}