页眉和页脚的div中的内容

重叠为了使问题更容易分析我已经创建this jsFiddle：页眉和页脚的div中的内容

代码：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <style> 
     body {margin:0; } 
     #mainContainer { position: absolute; right: 4%; left: 4%; height: 100%; } 
     #headerContainer { width: 100%; z-index: 10; position: absolute; background: #323232; color: white; height: 30px; } 
     #middleContainer { height: 100%; } 
     #leftSection { position: absolute; float: left; width: 175px; background: #71ABD1; height: 100%; overflow: auto; color: black; padding-top: 30px; } 
     #middleSection { position: absolute; height: 100%; background-color: yellow; left: 175px; right: 175px; color: black; padding-top: 30px; } 
     #rightSection { float: right; height: 100%; width: 175px; border-left: 1px dotted black; background: red; color: black; padding-top: 30px; } 
     #footerContainer { position: absolute; bottom: 0; width: 100%; height: 30px; background: #323232; color: white; } 
    </style> 
</head> 
<body> 
    <div id="mainContainer"> 
     <div id="headerContainer"> 
      headerContainer 
     </div> 
     <div id="middleContainer"> 
      <div id="leftSection"> 
       leftSection 
      </div> 
      <div id="middleSection"> 
       middleSection 
      </div> 
      <div id="rightSection"> 
       rightSection 
      </div> 
     </div> 
     <div id="footerContainer"> 
      footerContainer 
     </div> 
    </div> 
</body> 
</html>

随着顶部，中部和底部的标记，问题是：

1 - 正如你所看到涂成黑色页脚是不是真的在页面的底部，尽管在页脚DIV有position:absolute和bottom:0px

2-更重要的是，leftSection，middleSection和rightSection DIV与页眉和页脚DIV重叠，实际上，在这个小提琴中，看到显示的3个中间部分的文本的唯一方法是放置填充以避免出现填充显示在标题DIV下面。

我已经尝试在middleContainer上放置30px的顶部和底部值来解决重叠问题，但这并不能解决问题，我只想将headerContainer保留在底部，footerContainer保留底部，而所有3个中间部分都会调整到100％的高度。左边部分和右边部分具有固定宽度，但中间部分具有柔性宽度和高度。

来源

2012-10-03 Maya

的'填充顶：30PX;'是什么推你列下来过去页脚 – robbieAreBest

http://jsfiddle.net/grc4/XTQuT/2/做我想要的东西，没有指定固体高度值。

<!DOCTYPE html> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <style> 
    body { 
    margin: 0; 
    height:100%; 
    } 
#mainContainer { 
    position: absolute; 
    right: 4%; 
    left: 4%; 
    height: 100%; 
} 
#headerContainer { 
    width: 100%; 
    position: relative; 
    background: #323232; 
    color: white; 
    height: 30px; 
} 
#middleContainer { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: 30px 0; 
} 
#leftSection { 
    float: left; 
    width: 175px; 
    background: #71ABD1; 
    height: 100%; 
    overflow: auto; 
    color: black; 
} 
#middleSection { 
    position: absolute; 
    background-color: yellow; 
    left: 175px; 
    right: 175px; 
    top: 0; 
    bottom: 0; 
    color: black; 
} 
#rightSection { 
    float: right; 
    height: 100%; 
    width: 175px; 
    border-left: 1px dotted black; 
    background: red; 
    color: black; 
} 
#footerContainer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 30px; 
    background: #323232; 
    color: white; 
} 
</style> 
    </head> 
    <body> 
     <div id="mainContainer"> 
      <div id="headerContainer"> 
       headerContainer 
      </div> 
      <div id="middleContainer"> 
       <div id="leftSection"> 
        <div style="margin-top: 30px;">leftSection</div> 
       </div> 
       <div id="middleSection"> 
        <div style="margin-top: 30px;">middleSection</div> 
       </div> 
       <div id="rightSection"> 
        <div style="margin-top: 30px;">rightSection</div> 
       </div> 
      </div> 
      <div id="footerContainer"> 
       footerContainer 
      </div> 
     </div> 
    </body> 
    </html>

来源

2012-10-04 09:23:48 Maya

“padding-top：30px;”在你的3个内部元素上使它们比实际身体的高度高30px，从而产生你的问题。

从这3个元素中删除顶部填充，然后使页眉和页脚相对定位而不是绝对，并且应该设置。

像这样：http://jsfiddle.net/BPJxD/28/

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <style> 
     body {margin:0; } 
     #mainContainer { position: absolute; right: 4%; left: 4%; height: 100%; } 
     #headerContainer { width: 100%; z-index: 10; position: relative; background: #323232; color: white; height: 30px; } 
     #middleContainer { height: 100%; } 
     #leftSection { position: absolute; float: left; width: 175px; background: #71ABD1; height: 100%; overflow: auto; color: black; } 
     #middleSection { position: absolute; height: 100%; background-color: yellow; left: 175px; right: 175px; color: black; } 
     #rightSection { float: right; height: 100%; width: 175px; border-left: 1px dotted black; background: red; color: black; } 
     #footerContainer { position: relative; width: 100%; height: 30px; background: #323232; color: white; } 
    </style> 
</head> 
<body> 
    <div id="mainContainer"> 
     <div id="headerContainer"> 
      headerContainer 
     </div> 
     <div id="middleContainer"> 
      <div id="leftSection"> 
       leftSection 
      </div> 
      <div id="middleSection"> 
       middleSection 
      </div> 
      <div id="rightSection"> 
       rightSection 
      </div> 
     </div> 
     <div id="footerContainer"> 
      footerContainer 
     </div> 
    </div> 
</body> 
</html>

来源

2012-10-03 20:13:44 Mike

这看起来更好，但是这使得网页超过其100％的高度，例如，你可以看到垂直滚动条现在显示，最初的想法是将内容高度设置为100％的页面。 – Maya

你的问题是，你在headercontainer和footercontainer使用不必要的绝对定位，solution

HTML：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
</head> 
<body> 
    <div id="mainContainer"> 
     <div id="headerContainer"> 
      headerContainer 
     </div> 
     <div id="middleContainer"> 
      <div id="leftSection"> 
       leftSection 
      </div> 
      <div id="middleSection"> 
       middleSection 
      </div> 
      <div id="rightSection"> 
       rightSection 
      </div> 
     </div> 
     <div id="footerContainer"> 
      footerContainer 
     </div> 
    </div> 
</body> 
</html>

CSS：

body { margin:0; } 
#mainContainer 
{ 
    position: absolute; 
    right: 4%; left: 4%; 
    height: 100%; 
} 
#headerContainer 
{ 
    width: 100%; 
    z-index: 10; 
    position: relative; 
    background: #323232; 
    color: white; 
    height: 30px; 
} 
#middleContainer { height: 100%; } 
#leftSection 
{ 
    position: absolute; 
    float: left; 
    width: 175px; 
    background: #71ABD1; 
    height: 100%; 
    overflow: auto; 
    color: black; 
    padding-top: 30px; 
} 
#middleSection 
{ 
    position: absolute; 
    height: 100%; 
    background-color: yellow; 
    left: 175px; 
    right: 175px; 
    color: black; 
    padding-top: 30px; 
} 
#rightSection 
{ 
    float: right; 
    height: 100%; 
    width: 175px; 
    border-left: 1px dotted black; 
    background: red; 
    color: black; 
    padding-top: 30px; 
} 
#footerContainer 
{ 
    position: relative; 
    bottom: 0; width: 100%; 
    height: 30px; 
    background: #323232; 
    color: white; 
}

回顾你的整个小提琴我注意到你在每个div上都使用绝对定位。这是飞机错误。

你应该只绝对定位时：

你需要一个容器，是免费的文档的常用格式。如弹出式或浮动框。
您需要在父母div内使用div，并且使用固定位置，但这只有在父母定位设置为relative时才有效。

来源

2012-10-03 20:37:29

这给出了与上述第一个答案相同的结果，布局超过了导致垂直滚动条的页面高度的100％。 – Maya

你可以发布你的网页链接吗？ @Maya –

我在我的机器上本地尝试这种方式，它给出了与您的提琴手相同的结果，您的代码显示了我在本地看到的同一个滚动条。 – Maya

您可以删除像

#leftSection { position: absolute; float: left; width: 175px; background: #71ABD1; height: 100%; overflow: auto; color: black; } 
#middleSection { position: absolute; height: 100%; background-color: yellow; left: 175px; right: 175px; color: black; } 
#rightSection { float: right; height: 100%; width: 175px; border-left: 1px dotted black; background: red; color: black; }

3的所有

padding-top: 30px;

，改变你的HTML这样

<div id="mainContainer"> 
    <div id="headerContainer"> 
     headerContainer 
    </div> 
    <div id="middleContainer"> 
     <div id="leftSection"> 
      <div style="margin-top:30px;">leftSection</div> 
     </div> 
     <div id="middleSection"> 
      <div style="margin-top:30px;">middleSection</div> 
     </div> 
     <div id="rightSection"> 
      <div style="margin-top:30px;">rightSection</div> 
     </div> 
    </div> 
    <div id="footerContainer"> 
     footerContainer 
    </div> 
</div>

我希望这可以帮助。

来源

2012-10-04 00:07:02 Afshin

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <style> 
     body {margin:0; } 
     #mainContainer { position: relative; right: 4%; left: 4%; height: 100%; width:1000px; } 
     #headerContainer { width: 1000px; z-index: 10; position: absolute; background: #323232; color: white; height: 30px; } 
     #middleContainer { height: 100%; width:1000px; position:relative; display: table-cell;} 
     #leftSection { float: left; width:25%; background: #71ABD1; overflow: auto; color: black; padding-top: 30px; height: 100%;} 
     #middleSection { float: left; height:100%; width:50%; background-color: yellow; color: black; padding-top: 30px; } 
     #rightSection { float:left; height:100%; width: 25%; background: red; color: black; padding-top: 30px; } 
     #footerContainer { bottom: 0; width:1000px; height: 30px; background: #323232; color: white; float:left;} 
    </style> 
</head> 
<body> 
<div id="mainContainer"> 
    <div id="headerContainer"> headerContainer </div> 
    <div id="middleContainer" > 
    <div id="leftSection"> leftSection </div> 
    <div id="middleSection"> middleSection </div> 
    <div id="rightSection"> rightSection 
     rightSection   rightSection   rightSection   rightSection   rightSection   rightSection   rightSection </div> 
    </div> 
    <div id="footerContainer" > footerContainer </div> 
</div> 
</body> 
</html>

来源

2012-10-04 11:22:14

页眉和页脚的div中的内容

回答

相关问题