Asp.net 如何确定各自屏幕分辨率的高度？

我已经张贴了我的网页图像，也张贴了html代码和CSS，我适用于它

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

HTML

菜单的CSS

我想要这样的输出：

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

这些是我的菜单：

我可以通过在#main中使用

position:fixed

。。My#main在菜单上被覆盖。

---

来自w3c规范：

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

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

注意：section元素不是泛型容器元素。当 元素用于样式设置或方便 在编写脚本时，建议作者改用div元素。A. 一般规则是，只有当 元素的内容将在文档的 大纲

按照这种逻辑，如果需要将样式应用到元素，则需要一个div。

标记是语义标记，而不是功能标记。在section标记中，应该有一个div元素来保存内容，它应该是CSS样式的目标

---

编辑：此外，由于

是HTML5元素，如果您使用的是较旧的浏览器，则需要将其显式设置为

显示：block

。

我想您不应该应用静态高度/或为其指定固定高度，尽管您可以从发布的图像中使用javascript/jquery进行设置，我想下面的css应该是你的解决方案

将css添加到您的#main

编辑：在

#main

---

Demo：

在较新的浏览器上，您可以使用

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

涉猎示例：

支持calc（）的浏览器：

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

这就达到了你的要求

---

这里有一个

标题标签还没有关闭，您的问题也不是很清楚。请更新问题和代码。哦，我将其从更改为。如果我加载任何内容。。我希望在#main中滚动显示，而不是在浏览器中滚动显示！有可能吗？是的，有可能。在#main中加载任何导致溢出的内容都会在#main本身而不是浏览器中添加滚动条。这就是为什么在您的#main中添加overflow:auto，如果我添加position:fixed。。布局变得混乱。。方法覆盖菜单栏上的所有内容。！！：（可以给我你的完整代码吗？请添加一个提琴，这样我可以帮助你。我想问题是#main由于其位置而覆盖了菜单。尝试将#main css下的顶部增加到115px

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

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

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

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