Question

我正在做一个购物的模拟布局，我似乎无法在添加其他项目时正确调整大小，div只是重叠。但是当内容只是文本和图像时，它可以正常工作。有人有主意吗？

提前致谢

这是可以正常工作的测试布局。 Layout Working

这是重叠的购物车布局。 Layout Not Working

＆＃13;

html, body {
    margin:0;
    padding:0;
	background:transparent;
}
body:after {
    content:"";
    position:fixed;
    left:0;
    top:0;
    right:0;
    bottom:0;
    display:block;
    background:url(../background.jpg) no-repeat 50% 50%;
    background-size:cover;
	z-index: -2;
}
#side-bar {
	position:fixed;
	float:left;
	width:25%;
	min-width:200px;
	height:100%;
	min-height:420px;
	z-index: 3;
	background-color: rgba(0,0,0,0.9);
	border-right: 1px solid rgba(255,255,255,0.3);
	box-shadow: 3px 0 5px rgba(0,0,0,0.5);
}
#content {
	position: relative;
	float: right;
	width: 75%;
	z-index: 2;
	background-color: rgba(0,0,0,0.3);
}
#nav-bar {
	width:100%;
	min-width:350px;
	height:50px;
	font-family: 'Roboto Condensed', sans-serif;
	font-size:12px;
	color: white;
}
#nav-bar ul {
	position:relative;
	width:100%;
	height: 100%;
	min-width:280px;
	background-color: rgba(0,0,0,0.2);
	border-bottom:1px solid rgba(0,0,0,0.0);
}
#nav-bar li {
	display: inline-block;
	float: right;
	width: 13%;
	min-width:60px;
	line-height: 50px;
	text-align:center;
	margin:0;
	padding: 0;
}
#nav-bar a:link, a:visited {
    color: white; 
    text-decoration: none;
}
#nav-bar a:hover {
    color: #FAED26;
	text-decoration: none;
}
#advert {
	top:50px;
	width:100%;
	height:50px;
	text-align: center;
	font-size: 18px;
	font-family: 'Roboto Condensed', sans-serif;
	color: #FAED26;
	background-color: rgba(0,0,0,0.45);
	border-bottom:1px solid rgba(0,0,0,0.0);
}
#advert h1 {
	line-height: 40px;
}
#advert h2 {
	margin-top:-12px;
	font-size: 11px;
}
#sub-nav {
	top:100px;
	width:100%;
	min-width:350px;
	height:25px;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight:500;
	font-size:12px;
	color: white;
}
#sub-nav ul {
	margin: 0;
	padding: 0;	
	display: table;
	width:100%;
	height: 100%;
	background-color: rgba(0,0,0,0.3);
} 
#sub-nav li {
	list-style: none;
	display:table-cell;
	width:16.6%;
	height:100%;
	text-align:center;
	vertical-align:middle;
	background-clip: padding-box;
	background-color:rgba(0,0,0,0.2);
	border:1px solid rgba(0,0,0,0.0);
}
#sub-nav li:before {
    content: '';
    display: inline-block;
    width: 1px;
    vertical-align: middle;
    height: 100%;
}
#sub-nav a:link, a:visited {
    color: white; 
    text-decoration: none;
}
#sub-nav a:hover {
    color: #FAED26;
	text-decoration: none;
}
#page-nav-top {
	top:125px;
	width:100%;
	min-width:350px;
	height:25px;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight:500;
	font-size:10px;
	color: white;
	background-color: rgba(0,0,0,0.45);
}
#page-nav-top .left {
	position:relative;
	float: left;
	left: 50px;
	height:25px;
	line-height:25px;
}
#page-nav-top .right {
	position:relative;
	float: right;
	right: 50px;
	height:25px;
	line-height:25px;
}
#page-break-1 {
	top:150px;
	width:100%;
	height:5px;
	background-color: rgba(0,0,0,0.3);
}
#page-break-2 {
	width:100%;
	height:5px;
	background-color: rgba(0,0,0,0.3);
}
#page-content {
	top:165px;
    bottom:200px;
    width:100%;
	height:100%;
    background-color: rgba(0,0,0,0.3);
	min-height: calc(100vh - 490px);
}
#footer {
    width:100%;
	height:330px;
	font-family: 'Roboto Condensed', sans-serif;
	background-color: rgba(0,0,0,0.9);
}

＆＃13;

<div id="side-bar"></div>
	<div id="content">
		<div id="nav-bar">
			<?php include ("nav-bar.php"); ?>
		</div>
		<div id="advert">
			<?php include ("advert.php"); ?>
		</div>
		<div id="sub-nav">
			<?php include ("sub-nav/cart.php"); ?>
		</div>
		<div id="page-nav-top">
			<div class="left">HOME >>
				<font style="color: #FAED26;">SHOPPING CART</font>
			</div>
			<div class="right"><a href="javascript:history.back()">GO BACK</a>
			</div>
		</div>
		<div id="page-break-1"></div>
		<div id="page-content"><br>
text<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
text<br>
</div>
		<div id="page-break-2"></div>
		<div id="footer">
			<?php include ("footer.php"); ?>
		</div>
	</div>

＆＃13;

Answer 1

你有浮动元素，这意味着它们被取出正常流量。您可以将clearfix应用于浮动元素的父级，以使其具有子级的高度。

在您的例子中，您可以添加：

#page-content:after {
  content: "";
  display: table;
  clear: both;
}

div没有调整某些内容的大小

1 个答案: