Question

我有以下问题。

我做了以下事情：

在我的css文件中，我已为body和div body中包含的height: 100%;标记声明了（div标记在技术上）一个<asp:panel>标记，但是将其呈现为div标记。

这样可以正常工作，并且div容器可以从上到下填充浏览器，并且不会像预期的那样提供任何滚动条。

然而，在其中一个子页面上，我从Page_Load方法向面板/ div添加了一些控件，这些控件足以填充超过屏幕的高度，因此垂直滚动条按原样给出。但是，当我开始滚动时，最初低于屏幕高度的内容部分不会获得任何背景。因此，即使屏幕内容超出该高度，背景仍然会受到屏幕最大高度的限制。

我认为height:100%会导致问题，但我没有找到一个在这种情况下可以正常工作的替代品。我尝试height:auto;导致背景被全部删除。

问题可能是基本的，但这些天我没有做太多的网络编程，所以请耐心等待：）

修改

作为附加信息，我应该提一下，如果重要的话，内容实际上是添加到原始div中的div内。

编辑2

一些相关的html和css：

<html>
<title></title>
<body>
  <form>
    <div class="MainContainer">
      <h1>My header</h1>
      <div class="MainMenu">
        ...
      </div>
      <div id="PageContents_BlogPostPanel" class="ContentContainer">
        ...(These are the contents that extend beyond the bottom of the page)!!
      </div>
    </div>
  </form>
</body>
</html>

以下是提取的css部分：

*
{
    margin: 0;
    padding: 0;
}

html, body
{
    background-color: #6CC66C;
height: 100%;
} 

form
{
    background: #6CC66C url(  'images/ShadowBackground.jpg' ) repeat-y top center;
    height: 100%;
}

body h1
{
    display:none;
}

.DivHeader
{
    font-family: Arial, Sans-Serif;
    font-size: 22px;
    color: #D04444;
    padding-top:20px;
    padding-bottom:10px;
}

p
{
    font-family: Arial, Sans-Serif;
    font-size: 16px;
}

a
{
    font-family: Arial, Sans-Serif;
    font-size: 16px;
    text-decoration: none;
}   

.MainContainer
{
    background: #6CC66C url( 'images/MainBackground.jpg' ) no-repeat top center;
    width: 1040px;
    height: 100%;
    margin: auto;
    background-color: #F7F7F7;
}

div.MainMenu
{
    position:relative;
    float: right;
    margin-right: 38px;
    margin-top: 103px;
    width: 495px;
}

.MainMenu a:link img, a:visited img { border: 0px; }

.ContentContainer
{
    float: left;
    margin-top:90px;
    margin-left:80px;
    width:550px;
}

Answer 1

我有一个解决方案，这很简单。：）

.MainContainer {
    ...
    display: table;
}

（从其他地方移除高度：100％，这是多余的。）

关于这个的一些规范信息：http://www.w3.org/TR/CSS2/tables.html也在这里：w3schools.com/css/pr_class_display.asp（显然我现在只能发布一个新用户的两个链接）

关于高度的使用：100％，这样做只会使元素高度等于它的父元素的高度 - 在这种情况下是文档窗口，而不是它的内容。这里有一些规格信息：http://www.w3.org/TR/CSS21/syndata.html#percentage-units

问候。

Answer 2

我认为你需要的是这样的：

风格应该是

    *
{
    margin: 0;
    padding: 0;
}

body
{
    font-family: Arial, Sans-Serif;
    font-size: 16px;
} 

form
{
    background: #6CC66C url(  'images/ShadowBackground.jpg' ) repeat-y top center;
}

body h1
{
    display:none;
}

.DivHeader
{
    font-family: Arial, Sans-Serif;
    font-size: 22px;
    color: #D04444;
    padding-top:20px;
    padding-bottom:10px;
}

a
{
    text-decoration: none;
}   

.MainContainer
{
    background: #F7F7F7 url( 'images/MainBackground.jpg' ) no-repeat top center;
    width: 1040px;
    margin: 0 auto;
    min-height: 100%;
}

div.MainMenu
{
    float: right;
    margin-right: 38px;
    padding-top: 103px;
    width: 495px;
}

.MainMenu a:link img, a:visited img { border: 0px; }

.ContentContainer
{
    float: left;
    margin-top:90px;
    margin-left:80px;
    width:550px;
}

你需要一个元素来清除MainContainer中浮动的div

<div class="MainContainer">
  <h1>My header</h1>
  <div class="MainMenu">
    ...
  </div>
  <div id="PageContents_BlogPostPanel" class="ContentContainer">
    ...(These are the contents that extend beyond the bottom of the page)!!
  </div>
  <div style="clear:both"></div>
</div>

Answer 3

在Css文件中尝试溢出标记

   overflow:scroll;
   overflow:auto;

“拉伸”背景容器以容纳所有内容

3 个答案: