Fatal编程技术网
  • css/
  • Css 如果存在大量文本或其他项，则内容框将从容器div中浮动

Css 如果存在大量文本或其他项，则内容框将从容器div中浮动

css html

Css 如果存在大量文本或其他项，则内容框将从容器div中浮动,css,html,Css,Html,编辑： 这个问题现在已经解决了，我开始做一个新的，而不是和这个问题斗争 我遇到了一个问题，现在是当我在我的网站上向content div添加内容时，例如100%高的iframe，它会使content div扩展并从Conatiner div中浮动出来。 所以css代码是这样的 @charset "utf-8"; /* CSS Document */ body{background-image:url('/media/Background.png');} #Container{ position:

编辑： 这个问题现在已经解决了，我开始做一个新的，而不是和这个问题斗争

我遇到了一个问题，现在是当我在我的网站上向content div添加内容时，例如100%高的iframe，它会使content div扩展并从Conatiner div中浮动出来。 所以css代码是这样的

@charset "utf-8";
/* CSS Document */
body{background-image:url('/media/Background.png');}
#Container{
position:relative; 
width: 900px;  
min-height:200px; 
margin: 0px auto 0 auto;  
text-align: left;  
padding-left: 1px;  
cursor: de; 
border-left: 1px solid #000001;
border-right: 1px solid #000001;
border-top: 1px solid #000001;

background-color:#C1E9FF; 
overflow:inherit;
}
#LogoContainer{
position:absolute; 
background-image:url('/media/Logo.png'); 
border-right-width:1px; 
border-bottom-width:1px; 
border-right-color:rgb(0,0,1); 
border-bottom-color:rgb(0,0,1); 
border-right-style:solid; 
border-bottom-style:solid; 
width:400px; 
height:50px; 
}
#LikeBar{
position:absolute;
border-bottom-width:1px; 
border-bottom-color:rgb(0,0,1); 
border-bottom-style:solid; 
width:500px; 
height:50px;  
left:400px;
}
#ButtonHome{
position:absolute; 
background-image:url('/media/Bt.png'); 
width:100px; 
height:30px;  
top:50px; 
z-index:1;
}
#ButtonVideo{
position:absolute; 
background-image:url('/media/Bt.png'); 
width:100px; 
height:30px; 
left:105; 
top:50px; 
z-index:1;
}
#ButtonSpeedtest{
position:absolute; 
background-image:url('/media/Bt.png'); 
width:100px; 
height:30px; 
left:210; 
top:50px; 
z-index:1;
}
#ButtonYVideos{
position:absolute; 
background-image:url('/media/Bt.png'); 
width:100px; 
height:30px; 
left:315; 
top:50px; 
z-index:1;
}
#YouTubeBox{
position:absolute; 
background-image:url('/media/Box.png'); 
width:100px; 
height:30; 
left:10px; 
text-align:center;
}
#TwitterBox{
position:absolute; 
background-image:url('/media/Box.png'); 
width:100px; 
height:30; 
left:110px; 
text-align:center;
}
#FaceBookBox{
position:absolute; 
background-image:url('/media/Box.png'); 
width:100px; 
height:30; 
left:210px; 
text-align:center;
}
#Content{
position:relative;  
top:90px; 
width:780px; 
min-height:80%; 
border-top:1px solid #000001; 
}
#Footer{
position:relative; 
border-top-width:1px; 
border-top-color:rgb(0,0,1); 
border-bottom: 1px solid #000001;
border-top-style:solid; 
width:900px; 
bottom:0px; 
z-index:1; 
text-align:center; 
}
#AdFooter{
position:relative; 
width:728px;  
height:100px; 
margin: 0px auto 0 auto;  
border-left: 1px solid #000001;
border-right: 1px solid #000001;
}
#AdSidebar{
position:absolute; 
width:120px;  
height:600px; 
left:780px;
top:50px;
border-left: 1px solid #000001;
border-bottom: 1px solid #000001;
}
p{line-height: 1px;}
和当前html代码，没有与错误无关的内容

<html>
<head>
<title>Faulty css</title>
<link href="ThemeV1.css" rel="stylesheet" type="text/css">

</head>
<body>
<div id="Container"> <!-- Start Container -->
<div id="LogoContainer">
</div>
<div id="LikeBar">
<p class="DivT">
</p>
</div>
<!-- Menu Controls -->
<a href="/"><div id="ButtonHome"><center><p>Home</p></center></div></a>
<!-- <a href="/blog"><div id="ButtonVideo"><center><p>Blog</p></center></div></a> -->
<a href="/Speedtest.html"><div id="ButtonSpeedtest"><center><p>SpeedTest</p></center></div></a> 
<a href="/videos.html"><div id="ButtonVideo"><center><p>Videos</p></center></div></a>
<!-- WEBSITE CONTENT -->
<div id="Content">
<iframe src="about:blank" width="100%" height="100%" allowTransparency="true"></iframe>
</div>
<!-- END WEBSITE CONTENT -->
<!-- Footer -->
<div id="Footer">
<p>Test</p>
<th>
</div>
<!-- End Footer -->
<div id="AdFooter">
</div>
<div id="AdSidebar">
</div>
</div> <!-- End Container -->
</body>
</html>


错误的css




试验
我猜这是因为页脚被锁定，当内容变大时，页脚不会移动。
我不想做的是重新编码所有内容，因为这是我创建的第一个主题，但它可以工作，但是页脚上有bug。

问题在于
页脚中的
p
。您有
行高：1px
，这将迫使文本从页脚向上。您可能应该填充
#页脚p
，或者强制使用更大的
行高度。我也会在页脚本身设置一个静态高度或某种填充。
我尝试过，但页脚仍然被内容覆盖，因此页脚不会改变高度，而且p从未从页脚中挤出。你应该尝试一种CSS粘性页脚解决方案。