3

我已经发布了我的网页图片，还发布了我在上面应用的 html 代码和 CSS。

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

在此处输入图像描述

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

我想要这样的输出：

在此处输入图像描述

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

这些是我的菜单：

在此处输入图像描述

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

在此处输入图像描述

4

4 回答 4

1

来自 w3c 规范：

section 元素表示文档或应用程序的通用部分。在这种情况下，部分是内容的主题分组，通常带有标题。

章节的示例包括章节、选项卡式对话框中的各种选项卡式页面或论文的编号章节。Web 站点的主页可以分为介绍、新闻项目和联系信息的部分。

...

注意：section 元素不是通用的容器元素。当需要一个元素来设置样式或方便编写脚本时，鼓励作者改用 div 元素。一般规则是，只有当元素的内容明确地列在文档大纲中时，section 元素才是合适的。

按照这个逻辑，如果你需要一个元素来应用样式，你就需要一个 div。<section>标签是语义标签而不是功能标签。在你的 section 标签内，你应该有一个 div 元素来保存内容，它应该是 CSS 样式的目标。

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

于 2013-04-04T07:49:27.717 回答
1

我想你不应该应用静态高度/或给它固定高度，尽管你可以使用 javascript/jquery 从你发布的图片中做到这一点，我想下面的 css 应该是你的解决方案。

将 CSS 添加到您的#main

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

编辑：overflow:auto在#main 演示中添加：http : //jsfiddle.net/hEGms/2/

于 2013-04-04T07:51:31.907 回答
1

在较新的浏览器上，您可以使用该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

于 2013-04-04T07:52:30.067 回答
0

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

这个例子实现了你所要求的。

这里还有一个

于 2013-04-04T10:02:19.470 回答