Home  >  Article  >  Web Front-end  >  CSS中100%对应父节点的什么属性?_html/css_WEB-ITnose

CSS中100%对应父节点的什么属性?_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:16:211054browse

#DD{	position: relative;	top: 0px;	left: 0px;	width: 500px;	height: 300px;	overflow: hidden;}#A1{ 	position: relative;	width: 100%;	height: 100%;	padding-bottom: 50px;	background-color: #F00;}#A2{ 	position: relative;	width: 100%;	height: 100%;	border-bottom: solid 50px #000000; 	background-color: #F00;}#B{	position: relative;	top: 0px;	left: 0px;	width: 100%;	height: 100%;	overflow-x:hidden;	overflow-y:auto;	background-color: #00F;}


<html><head><link rel="stylesheet" href="css.css" type="text/css"></head><body><div id="DD">	<span id="A1">		<span id="B">			<ul>				<li>1</li>				<li>1</li>				<li>1</li>				<li>1</li>				<li>1</li>				<li>1</li>				<li>1</li>				<li>1</li>				<li>1</li>				<li>1</li>				<li>1</li>				<li>1</li>				<li>1</li>				<li>1</li>				<li>1</li>				<li>1</li>				<li>1</li>				<li>1</li>				<li>1</li>				<li>1</li>			</ul>		</span>	</span></div></body></html>


A1替换为A2是一样的,B的区域完全覆盖了A,padding和border都没作用,我想要的是B的底到A的底有50px距离


回复讨论(解决方案)

页面刚打开是不对的,但是切换一下页面又对了

 
        

把span标签换成div,span是内联元素,不能定义block元素的属性

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn