Question

我已经发布了我的网页图片，并发布了我在其上申请的HTML代码和CSS。

我希望我的#main应该在页面上以固定高度显示为相应的笔记本电脑分辨率。那么我应该给它多大的尺寸？我得到的另一个问题是，当我试图给它高度时，它不适用。我的#main也包含一个页脚。我需要在css中应用此更改？当我加载其中的任何内容时，我的#main扩展了高度。但我希望它的高度应该固定。

enter image description here

HTML

<html>
<head>
<title> Index </title>
        <link type="text/css" rel="stylesheet" href="../Content/Site.css">
        <script type="text/javascript" src="../../Scripts/jquery-1.9.1.min.js">
        <script type="text/javascript" src="../../Scripts/jquery.js">
        <script type="text/javascript" src="../../Scripts/MicrosoftAjax.js">
        <script type="text/javascript" src="../../Scripts/MicrosoftMvcAjax.js">
        <script type="text/javascript" src="../../Scripts/MicrosoftMvcValidation.js">
        <script type="text/javascript" src="../../Scripts/modernizr-1.7.min.js">
        <link type="text/css" rel="stylesheet" href="../Content/menu.css">
        <script type="text/javascript" src="../../Scripts/menu.js">
</head>

<body>
<div class="page">
     <header>
        <table id="header">
        <div id="menu">
        <ul class="menu">
        <li class="current">
        <li>
        <a href="/CRMDashboard/Dashboard">
        </li>
        <li>
        <a class="parent" href="/CRM/Index">
        <div>
        </li>
        <li>
        <a class="parent" href="#">
        <div>
        </li>
        <li>
        <a class="parent" href="#">
        <div>
        </li>
        <li>
        <a href="/FilterCRMRequest/Index">
        </li>
        <li>
        <a href="#">
        </li>
        <li class="back" style="left: 30px; width: 100px; display: block; overflow: hidden;">
        <div class="left"></div>
        </li>
        </ul>
        </div>
    </header>
<section id="main">
    <h2>Index</h2>
        <footer>
                <hr>
                <p> Copyright (c) 2012 </p>
                <hr>
        </footer>
</section>

</div>
</body>
</html>

CSS

body {
    background: none repeat scroll 0 0 rgba(0, 117, 149, 0.9);
    color: #000000;
    font-family: "Trebuchet MS",Verdana,Helvetica,Sans-Serif;
    font-size: 0.85em;
    height: 100%;
    margin: 0;
    padding: 0;
}


.page {
    margin-left: auto;
    margin-right: auto;
    width: 98%;
}

header, #header {
    border: 0 none;
    color: #000000;
    margin-bottom: 0;
    padding: 0;
    position: relative;
}
header, footer, nav, section {
    display: block;
}

header, #header {
    color: #000000;
}

#main {
     padding: 30px 30px 15px;
background-color: #fff;
border-radius: 4px 4px 4px 4px;
top:50px;
bottom:10px;
/*position:fixed;*/
right:10px;
left:10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;

}
footer, #footer {
    background-color: #FFFFFF;
    border-radius: 0 0 4px 4px;
    color: #999999;
    font-size: 0.9em;
    line-height: normal;
    margin: 0;
    padding: 10px 0;
    text-align: center;
}

CSS菜单

div#menu {
    background: url("images/main-bg.png") repeat-x scroll 0 0 transparent;
    height: 41px;
}


div#menu ul.menu {
    padding-left: 30px;
}
div#menu ul {
    border-radius: 0 0 4px 4px;
    float: left;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}

div#menu li {
    background: url("images/main-delimiter.png") no-repeat scroll 98% 4px transparent;
}
div#menu li {
    border-radius: 0 0 4px 4px;
    display: block;
    float: left;
    margin: 0;
    padding: 0 5px 0 0;
    position: relative;
    z-index: 9;
}

我想要这样的输出：

enter image description here

当内容加载更多时，我也希望我的#main显示滚动条...而不是浏览器的滚动条显示。

这些是我的菜单：

enter image description here

我可以在#main中使用position:fixed来解决问题，但是当我使用它时...我的#main会在菜单上覆盖。

enter image description here

Answer 1

来自w3c规范：

section元素表示文档的通用部分或   应用。在这方面，一节是一个主题分组   内容，通常带有标题。

部分的例子是章节，a中的各种标签页   选项卡式对话框，或论文的编号部分。一个网站的   主页可以分为几个部分，用于介绍，新闻   项目和联系信息。

...

注意：section元素不是通用容器元素。当一个   元素是出于样式目的或方便的需要   脚本，鼓励作者使用div元素。一个   一般规则是，section元素仅适用于   元素的内容将在文档中明确列出   概要

通过这种逻辑，如果你需要一个元素来应用样式，你需要一个div。 <section>标记是语义标记，而不是功能标记。在你的section标签里面你应该有一个包含内容的div元素，它应该是CSS样式的目标。

编辑：此外，由于<section>是HTML5元素，因此如果您使用的是较旧的浏览器，则需要明确将其设置为display: block。

Answer 2

我猜你应该不应用静态高度/或给它固定高度，虽然你可以使用javascript / jquery从你发布的图像，我想跟随css应该是你的解决方案。

在你的#main

中添加了css

  top:50px;
    bottom:10px;
    position:fixed;
    right:10px;
    left:10px;

修改：在overflow:auto中添加了#main 演示：http://jsfiddle.net/hEGms/2/

Answer 3

在较新的浏览器上，您可以使用calc()功能动态设置部分的高度，例如

html, body, .page { 
    height: 100%;
    margin: 0; padding: 0;
}

header {
  height: 100px;
}

section {
   height: -webkit-calc(100% - 110px);
   height: -moz-calc(100% - 110px);
   height: calc(100% - 110px);
   border: 1px red solid;
   overflow: auto;
}

示例dabblet：http://dabblet.com/gist/5308785

支持calc（）的浏览器：http://caniuse.com/calc

Answer 4

谷歌的“流体高度布局”。你会得到很多例子。

这example实现了你所要求的目标。

这是一个more

如何修复高度各自的屏幕分辨率？

4 个答案: