gpt4 book ai didi

html - 如何使我的网站具有自动 :height and overflow:auto 的可扩展性

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

我正在尝试创建一个可垂直扩展的站点,以便可以添加模块并调整页面大小。我一直在尝试通过使用绝对定位、自动高度和自动溢出来实现这一点。问题是,在某些时候,您似乎必须至少定义一个高度……一旦发生这种情况,站点就不再完全可扩展。在我下面的代码中,您可以看到它基本上都是可扩展的,直到您到达容器(已折叠)。这个div的主要目的是让页面上的所有内容居中,然后内容绝对定位在里面。我不想给容器一个高度,但它只是不承认里面的内容。我怎样才能使它工作?

ps.疯狂的颜色只是为了构建和测试。

HTML

<div id="container">
<div id = "contentHolder">
<div id="header" >
<h1>This is a heading</h3>
</div>
<div id="moduleContainer">
<div id= "myModule">
<div id= "moduleHeader">
<p class="p1">Who We Are
<span class="p2">Learn more about Trinity</span></p>
</div>
<div id= "moduleBody" >
<p class="p3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fringilla tempus hendrerit.
Mauris sed felis vel orci bibendum semper vel eget tortor. Ut adipiscing interdum tellus ac pulvinar.
Suspendisse sit amet hendrerit lectus. In felis felis, venenatis luctus varius ut, accumsan sit amet tellus.
Integer ac gravida sem. Vivamus orci turpis, tempus sit amet tincidunt ultrices, interdum luctus dolor.
Suspendisse sit amet hendrerit lectus. In felis felis, venenatis luctus varius ut, accumsan sit amet tellus.
Integer ac gravida sem. Vivamus orci turpis, tempus sit amet tincidunt ultrices, interdum luctus dolor.
</p>

<div id="mod_Image" ><img src="churchImg.jpg" style="height:100%; width:100%; "/></div>
</div>
</div><!---end myModule---->
</div><!---end moduleContent---->

<div id="moduleContainer">
<div id= "myModule">
<div id= "moduleHeader">
<p class="p1">Who We Are
<span class="p2">Learn more about Trinity</span></p>
</div>
<div id= "moduleBody" >
<p class="p3">
The United Church of Christ acknowledges as its sole head, Jesus Christ, Son of God and Savior.
It acknowledges as kindred in Christ all who share in this confession. It looks to the Word of
God in the Scriptures, and to the presence and power of the Holy Spirit, to prosper its creative
</p>

<div id="mod_Image" ><img src="churchImg.jpg" style="height:100%; width:100%; "/></div>
</div>
</div><!---end myModule---->
</div><!---end moduleContent---->

</div><!---end contentHolder---->
</div><!---end container---->

CSS

#container 
{
text-align:center;
margin-left:auto;
margin-right:auto;
background-color:purple;
width:1330px;
height:auto;
position:relative;
padding:20px;

}

#contentHolder
{
width:1200px;
height:auto;
background-color:green;
padding:40px;
position:absolute;
top:20px;
left:20px;
overflow:auto;
}

#header
{
width:100%;
height:200px;
background-color:yellow;
overflow:auto;
}

#moduleContainer
{
width:1200px;
height:auto;
background-color:red;
float:left;
overflow:auto;
padding-bottom:40px;
border-bottom:thin dashed white;
}

#myModule
{
height:auto;
width: 1000px;
overflow:auto;
}

#moduleHeader
{
width:100%;
height:auto;
overflow: auto;
}

#moduleBody
{
background-color:#0E1031;
width:800px;
height:auto;
margin-left:auto;
margin-right:auto;
padding:40px;
border:thick solid #1B1851;
border-radius: 15px;
overflow: auto;
}

#mod_Image
{
height:200px;
width:200px;
margin-left:40px;
float:left;
border:thick solid white;
}

.p1
{
text-align:left; font-family:Arial; font-size:22px; font-size:30px; color:#191970;margin-left:80px;"
}

.p2
{
color:#999; font-size:20px; font-weight:bold;
}

.p3
{
text-align:justify; height:150px; width:500px; font-family:Arial; font-size:14px; line-height:150%; float:left; color:white;
}
h1
{
text-align:left; padding:60px; color:green;
}

最佳答案

#contentHolder {position:absolute;} 中移除绝对位置

关于html - 如何使我的网站具有自动 :height and overflow:auto 的可扩展性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15354843/

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