首页 文章

如何使用CSS删除div之间的空格？ [重复]

提问于
浏览 次
0

这个问题在这里已有答案：

我有一个简单的页面，其中一个主div包含两个div（left_menu和content），另一个div包含在包含页脚的主div之外 .

实际页面外观如下：

如您所见，页脚和其他div之间有一个空白区域 . 我的问题是如何删除它 .

我尝试了其他问题中提出的一些解决方案（将 vertical-align: top; 添加到页脚's CSS, but it didn'工作） .

您可以在下面找到完整的HTML和CSS代码 .

<!DOCTYPE html>
<html>
<head>
<style>

html{
height:100%;
}

body{
  height:100%;
  width:95%;
  margin:0px auto;
  border: 1px solid black;
}


#main {
background-color:#f0f0f0;
height:80%;
}

#left_menu{
background-color:red;
width:25%;
height:100%;
float:left;
}

#content {
background-color:blue;
width:75%;
float:right;
height:100%;
}

#footer {
vertical-align: top;
background-color:green;
width:100%;
height:20%;
}
</style>
</head>
<body>

<div id="main">

	<div id="left_menu">
	<p> Something in my left menu</p>
	</div>

	<div id="content">
		<p> Some content </p>
		

		<p> More content </p>

	</div>
</div>
<div id="footer">
	<p>	 My footer.</p>
</div>
</body>
</html>
html css

1 回答

  • 0
    <!DOCTYPE html>
<html>
<head>
<style>

html{
height:100%;
}

body{
  height:100%;
  width:95%;
  margin:0px auto;
  border: 1px solid black;
  position:relative;
}


#main {
background-color:#f0f0f0;
height:80%;
}

#left_menu{
background-color:red;
width:25%;
height:100%;
float:left;
}

#content {
background-color:blue;
width:75%;
float:right;
height:100%;
}

#footer {
vertical-align: top;
background-color:green;
width:100%;
height:20%;
  position:absolute;
  bottom:0;
}
</style>
</head>
<body>

<div id="main">

	<div id="left_menu">
	<p> Something in my left menu</p>
	</div>

	<div id="content">
		<p> Some content </p>
		
    
		<p> More content </p>

	</div>
</div>
<div id="footer">
	<p>	 My footer.</p>
</div>
</body>
</html>
    回复于

相关问题