CSS定位挑战_Css - Fatal编程技术网

CSS定位挑战

css

CSS定位挑战,css,Css,这是我多年来多次遇到的问题，我总是放弃使用JavaScript来计算页面大小事件。可以用纯CSS实现吗我需要设计如下CSS布局： +--------------------------- header --> +--------------------------- menu | scrollable content | ---> | | | v | v | +--------------------------- footer --&

这是我多年来多次遇到的问题，我总是放弃使用JavaScript来计算页面大小事件。可以用纯CSS实现吗

我需要设计如下CSS布局：

+--------------------------- header --> +--------------------------- menu | scrollable content | ---> | | | v | v | +--------------------------- footer --> +--------------------------- +--------------------------- 标题--> +--------------------------- 菜单|可滚动内容 | ---> | | | v | v | +--------------------------- 页脚--> +---------------------------

固定高度的收割台应贴在顶部并水平扩展，以与窗的最右侧边缘相接。固定高度的页脚应固定在底部，并水平扩展以与窗口的最右侧边缘相交。固定宽度的菜单应保持在左侧，并展开以满足页眉和页脚的要求。内容区域应填满剩余空间。内容区域可以滚动，但页面本身不能滚动。

如果您不使用表格，而只使用div，则可以在所有浏览器（包括IE6）中使用CSS轻松完成此操作。不确定您将显示什么样的内容…是表格数据吗

<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>

如果目标浏览器支持，使用div和position:fixed很容易

看

你需要支持IE6吗？（未更新的WinXP中的默认浏览器）如果不支持，则绝对可行。

如果不需要支持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;
}

我实际上并没有对此进行测试。

查看和的来源。（或者只是…）

也许你可以从这篇文章开始：。然后你会将这项技术应用于此。

如果我理解正确，这可能会起作用。通过在需要展开的实际内容周围设置一个div，并将其设置为显示为表格，将边栏等任何部分设置为显示为单元格，可以得到相等的col。用fixed将页脚和页眉固定到窗口，并将其z索引设置为高。我在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>


*{边距：0；填充：0；}
#标题{高度：50px；宽度：100%；位置：固定；顶部：0；背景：红色；z索引：99999；}
#组{显示：表行；清除：两者；宽度：100%；位置：绝对；顶部：50px；溢出：隐藏；}
#侧边栏{显示：表格单元格；宽度：200px；背景：#e3e；浮动：左侧；高度：100%；垂直对齐：顶部；位置：固定；顶部：50px；填充底部：150px；}
#侧边栏内部{填充底部：150px；最大高度：500px；溢出：隐藏；}
#内容{左边距：200px；}
#页脚{高度：50px；宽度：100%；位置：固定；底部：0；背景：红色；z索引：99999；}

如果您不需要支持IE6，则只能在纯CSS中完成。是否支持IE6？那真是胡说八道@nw：不幸的是，我们中的一些人仍然被迫这样做。内容区域应该以哪种方式水平滚动？您需要一个流体布局，该布局具有一个菜单，该菜单使用人造列来满足页眉和页脚的要求。这听起来像是“CSS能做到这一点吗？”类型的问题之一！听起来解决方案可能是CSS/表格布局的混合…@nw:不支持IE6是疯狂的，内容可能是任何东西。。。这个布局将作为一个页面模板，然后填充我的web应用程序的各个页面。很好，它可以“轻松完成”但这并不是一个真正的答案，是吗？你当然需要调整它，并使用一些属性，比如内容子项的填充…使用边距而不是填充可能会更好。#页眉{位置：固定；顶部：0px；宽度：自动；高度：100px；}#页脚{位置：固定；底部：0px；宽度：自动；高度：100px；}#菜单{位置：固定；边距：100px 0px；/*避免头/脚重叠*/左：0px；高度：自动；宽度：250px；}#主{溢出：滚动；顶部：100px；左边距：250px；底部：100px；宽度：100px；}您需要结束#主；-）绝对表示元素位置相对于整个页面而不是视口是固定的。您需要position:fixed。这将不起作用，因为您无法在具有“宽度/高度自动”的元素上使用overflow:scroll更仔细地阅读。我在内容上使用了

overflow:scroll

，页面本身不会滚动。我指的是.content。如果将“高度”和“宽度”设置为“自动”，则意味着它将调整.Content的大小以适应内容，并且它实际上不会滚动任何内容。它需要有一个预先确定的高度或宽度，以便发生溢流。如果将CSS宽度/高度设置为自动，则需要javascript根据窗口的宽度/高度设置实际宽度/高度。

<!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>