页面布局使用div标签

我想设计一个网页，它分为3个区域： -页面布局使用div标签

1）标题区 2）左侧导航窗格中 3）主要内容区

对于这一点，我目前使用以下CSS类： -

.Content 
    { 
    position:absolute; 
    overflow:auto; 
    top:10%; 
    left:20%; 
    width:80%; 
    height:90%; 
    } 

    .Header 
    { 
    position:absolute; 
    left:0; 
    top:0; 
    height:10%; 
    width:100%; 
    background-color:Blue; 
    text-align:center; 
    } 

    .NavPanel 
    { 
     position:absolute; 
     top:10%; 
     left:0; 
     height:90%; 
     width:20%; 
     overflow:auto; 
     background-color:Menu; 
    }

的高度和身体标记的宽度被设定为100％。

我不认为这是做我想做的事情的一种很好的方式。例如，当我降低浏览器的高度时，标题区域按比例减少，最终消失。此外，Chrome浏览器按照预期呈现网页，但出于某种原因，IE8中会出现水平滚动条。

我对HTML和CSS没有太大的了解，所以我只想知道是否有更好的方法来做到这一点。谢谢！

来源

2012-09-10 ankit0311

您可能希望指定标题的绝对高度，例如：

.Header 
    { 
    position:absolute; 
    left:0; 
    top:0; 
    height:100px; 
    width:100%; 
    background-color:Blue; 
    text-align:center; 
    }

您还可以指定标题的字体大小的措施：height: 10em（1 EM应该是字母“的宽度m“; 1 ex将是字母”x“的高度）。

请注意，删除标题和内容的“位置”属性可能会更好。在这种情况下，定位将是相对的（默认），使内容出现在标题下方，而不管标题的大小。在这种情况下，请删除内容的“高度”属性。

来源

2012-09-10 07:19:40 JohnB

您可以尝试在标题上设置min-height并使用media queries。

例如，您可以设置min-height: 2em;和使用媒体查询，如：

@media (max-height: 20em) { /* the min-height for the header = 10% of the max-height used here */ 
    .content, .navPanel { 
     top: 2em; bottom: 0; 
    } 
}

DEMO

不过，有媒体查询不IE 8或更早的版本。

来源

2012-09-10 07:32:15 Ana

不要忘记媒体查询也适用于chrome！ :) – starbeamrainbowlabs

和其他浏览器。我只是在谈论IE版本。我会再说一遍。 – Ana

嗨，我认为你正在寻找这样的副本的页面布局，并将此代码粘贴到任何记事本，并检查出来。

<html> 
<head> 
    <style type="text/css"> 


     .Container 
     { 
     background-color:yellow; 
     height:100%; 
     weight:100%; 
     } 

     .inner 
     { 
     float:left; 
     top:10%; 
     height:90%; 
     width:100% 
     } 

     .Content 
     { 
     float:left; 
     top:10%; 
     left:20%; 
     width:80%; 
     height:100%; 
     background-color:skyblue; 
     } 

     .Header 
     { 
     float:left; 
     height:10%; 
     width:100%; 
     background-color:Blue; 
     text-align:center; 
     } 

     .NavPanel 
     { 
      float:left; 
      top:10%; 
      height:100%; 
      width:20%; 
      background-color:Menu; 
     } 
    </style> 
</head> 
<body> 
    <div class="Container"> 
     <div class="Header"></div> 
      <div class="inner"> 
       <div class="NavPanel"></div> 
       <div class="Content"></div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

来源

2012-09-10 07:37:04

这是一个基本的布局，您可以使用并在扩大：

http://jsfiddle.net/yUCdb/

来源

2012-09-10 11:30:54

你可以试试;

HTML

<div id="container"> 
    <div id="header"> 
    </div> 
    <div id="sidebar"> 
    </div> 
    <div id="viewer"></div> 
</div>

CSS

html, body { 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 
#header, #sidebar, #viewer { 
    position: absolute; 
} 
#header{ 
    top: 0; 
    width: 100%; 
    height: 10%; 
    background: yellow 
} 
#sidebar { 
    top: 10%; 
    width: 20%; 
    bottom: 0; 
    background-color: red; 
    z-index:100; 
} 
#viewer { 
    top: 10%; 
    left: 20%; 
    right: 0; 
    bottom: 0; 
    background-color: green; 
}

Here是现场演示。

来源

2012-09-10 11:38:53

页面布局使用div标签

回答

相关问题