Question

这是我多年来遇到的一个问题，我总是放弃并使用JavaScript来对页面调整大小事件进行计算。它可以用纯CSS完成吗？

我需要像这样设计一个CSS布局：

+---------------------------
 header  -->
+---------------------------
 menu | scrollable content
      | --->
   |  | |
   v  | v
      |
+---------------------------
footer -->
+---------------------------

固定高度的标题应粘在顶部并水平展开以符合窗口的最右边。固定高度的页脚应粘在底部，并且水平扩展以符合窗口的最右边。固定宽度的菜单应该粘在左侧并展开以满足页眉和页脚。内容区域应填充剩余空间。内容区域可以滚动，但不会滚动页面本身。

Answer 1

如果您不需要支持IE6，是的。

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.Header {
    width: 100%;
    height: 100px;
}
.Menu {
    position: absolute;
    left: 0;
    top: 100px;
    bottom: 50px;
    width: 175px;
}
.Footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 50px;
    width: 100%;
}
.Content {
    position: absolute;
    width: auto;
    height: auto;
    left: 175px;
    top: 100px;
    right: 0;
    bottom: 50px;
    overflow: scroll;
}

我实际上没有测试过这个。

Answer 2

在所有浏览器中都可以很容易地在CSS中完成，包括IE6，如果您不使用表而且只使用DIV。不知道你将展示什么样的内容......是表格数据吗？

<div class="fixed-header"></div>
<div class="menu-content-group"><div class="menu"><div class="menu-child"></div></div><div class="content"><div class="content-child"></div></div></div>
<div class="fixed-footer"></div>


html, body {
  width:100%;
  height:100%;
}

.fixed-header, .fixed-footer {
 display:block;
 position:absolute;
 width:100%;
 height:50px; /* whatever height you want for your header */
 float:left;
 top:0;
 left:0;
 z-index:2;
}

.fixed-footer {
 top:;
 bottom:0;
}

.menu-content-group {
  display:block;
  position:absolute;
  width:100%;
  height:100%;
  float:left;
  top:0;
  left:0;
}

.menu {
  display:block;
  position:absolute;
  width:100px;
  height:100%;
  top:0;
  left:0;
  z-index:1;
}

.content {
  display:block;
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  overflow-x:hidden;
  overflow-y:auto;
}

.menu-child {
  display:block;
  position:relative;
  width:100px;
  height:auto;
  top:50px;
}

.content-child {
  display:block;
  position:relative;
  width:100%:
  padding:50px 0;
  padding-left:100px;
}

Answer 3

使用DIV和位置很容易：固定，如果您的目标浏览器支持它。

请参阅http://www.quirksmode.org/css/contents.html

您需要支持IE6吗？（未更新的WinXP中的默认浏览器）如果没有，那肯定是可行的。

Answer 4

例如，请参阅this和this的来源。（或只是google for more ..）

Answer 5

也许你可以从这篇文章开始：How to keep footers at the bottom of the page。然后，您将该技术应用于此'Left Menu' 2 Column Liquid Layout (Percentage widths)。

Answer 6

如果我理解正确，这可能会奏效。通过在实际的东西周围设置一个div，你需要展开它并将其设置为显示为一个表格，并且像侧边栏这样的任何部分显示为单元格，你可以获得相等的cols。用固定的方法将页脚和页眉固定到窗口，并将z-index设置为高。我在safari中测试了底部代码，如果没有javascript来计算高度，这将无法在ie6中运行。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
 <title></title>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <style type="text/css">
 *{margin:0; padding:0;}
  #header{ height:50px; width:100%; position:fixed; top:0; background:red; z-index:99999;}
    #group{display:table-row; clear:both; width:100%; position:absolute; top:50px; overflow:hidden;}
    #sidebar{display:table-cell; width:200px; background:#e3e; float:left; height:100%; vertical-align:top; position:fixed; top:50px; padding-bottom:150px;}
 #sidebar-inside{padding-bottom:150px; max-height:500px; overflow:hidden;}
    #content{  margin-left:200px;}
 #footer{ height:50px; width:100%; position:fixed; bottom:0; background:red; z-index:99999;}
 </style>

</head>
<body>
 <div id="header"><!-- CONTENT HERE --></div>
    <div id="group"> 
    <div id="sidebar">
  <div id="sidebar-inside"></div>
       </div>
    <div id="content"></div>
    </div>
    <div id="footer"></div>

</body>

CSS定位挑战

6 个答案: