gpt4 book ai didi

html - "Stretching"用于保存所有内容的背景容器

转载 作者:太空宇宙 更新时间:2023-11-04 05:25:35 26 4
gpt4 key购买 nike

我有以下问题。

我做了以下事情:

在我的 css文件,我已经为 body 声明了两者和 div标记包含在 body 中, height: 100%; (div 标签在技术上是一个 <asp:panel> 标签,但 get 呈现为 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;
}

最佳答案

我有一个解决方案,而且非常简单。 :)

.MainContainer {
...
display: table;
}

(也从其他地方删除高度:100%,这是多余的。)

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

关于 Height: 100% 的使用,这样做只会使元素的高度等于它的父元素的高度 - 在本例中是文档窗口,而不是它的内容。这里有一些规范信息:http://www.w3.org/TR/CSS21/syndata.html#percentage-units

问候。

关于html - "Stretching"用于保存所有内容的背景容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5180273/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com