代码之家  ›  专栏  ›  技术社区  ›  sgerbhctim

如何解决css高度问题

css html
  •  1
  • sgerbhctim  · 技术社区  · 7 年前

    以下是代码片段: 

    /* text types */
h1{font-family: 'Open Sans', Arial, sans-serif; margin: 0; font-size: 24px; line-height: 125%;}
h2{font-family: 'Neuton', serif; margin: 5px 0px 10px 0px; font-size: 24px; font-weight: 200; line-height: 120%;}
h3{font-family: 'Open Sans', Arial, sans-serif; margin: 8px 0px 2px 0px; font-size: 16px; line-height: 130%; font-weight: 600;}
h4{font-family: 'Neuton', serif; font-size: 16px; margin: 2px 0px 6px 0px; line-height: 120%; font-weight: 200;}
h5{font-family: 'Open Sans', Arial, sans-serif; margin: 0; font-size: 12px;}
h6{font-family: 'Open Sans', Arial, sans-serif; font-size: 10px;}

/* links */
a, a:hover, a:visited, a:active{text-decoration: none; outline: none; color: inherit;}
a.underline:hover{text-decoration: underline; color: inherit;}
a.readMore{font-family: 'Raleway', serif; font-size: 15px; margin: 15px 0px 0px 0px; font-weight: 700; color: #428bca;}
.thinner{
	font-weight: 200;
}
.thin{
	font-weight: 300;
}
.normal{
	font-weight: 400;
}
.bold{
	font-weight: 500;
}
.bolder{
	font-weight: 600;
}
.boldest{
	font-weight: 700;
}

.sanserif{
	font-family: 'Open Sans', Arial, sans-serif;
}

/* align */
.text-left{
	text-align: left;
}
.text-right{
	text-align: right;
}

/* body */
body, html{
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
}
.container-page-80{
	width: 80%;
	position: relative;
	margin: auto;
}
.container-page-100{
	width: 100%;
	position: relative;
	margin: auto;
}


/* height adj */
.height-100{
	height: 100%;
	position: absolute;
}
.height-75{
	height: 75%;
	position: absolute;
}
.height-50{
	height: 50%;
	position: absolute;
}
.height-40px{
	height: 40px;
}

/* positions */
.fixed{
	position: fixed;
}
.vert-align-1{
	vertical-align: text-bottom;
}

/* images */
img.main-logo{
	height: 35px;
}

/* inputs */
input[type=text].search-bar{
	outline: none;
	height: 28px;
	padding: 0px 6px;
	width: 93%;
	outline: none;
	border: 1px solid rgba(0,0,0,.1);
	font-size: 15px;
	letter-spacing: 0.5px;
	border-radius: 5px;
	opacity: .8;
	-webkit-transition: all 250ms ease-out;
	-moz-transition: all 250ms ease-out;
	-ms-transition: all 250ms ease-out;
	-o-transition: all 250ms ease-out;
	transition: all 250ms ease-out;
}
input[type=text].search-bar:focus{
	color: black;
	opacity: 1;
}
input[type=text].search-bar:hover{
	color: black;
	opacity: 1;
}
button.start-selling{
	height: 30px;
	outline: none;
	background: none;
	border-radius: 5px;
	border: 1px solid transparent;
	font-size: 12px;
	color: white;
	padding: 0px 12px;
	letter-spacing: 1px;
	background-color: #9059b2;
	opacity: .9;
	-webkit-transition: all 250ms ease-out;
	-moz-transition: all 250ms ease-out;
	-ms-transition: all 250ms ease-out;
	-o-transition: all 250ms ease-out;
	transition: all 250ms ease-out;
}
button.start-selling:hover{
	opacity: 1;
}
button.sign-in{
	height: 30px;
	outline: none;
	background: none;
	border-radius: 5px;
	border: 1px solid transparent;
	font-size: 12px;
	color: black;
	font-weight: 700;
	padding: 0px 12px;
	letter-spacing: 1px;
	background-color: none;
	opacity: .9;
	-webkit-transition: all 250ms ease-out;
	-moz-transition: all 250ms ease-out;
	-ms-transition: all 250ms ease-out;
	-o-transition: all 250ms ease-out;
	transition: all 250ms ease-out;
}
.puma{
	background-color: red;
}






/*  SECTIONS  */
.section-np{
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col-np {
	display: block;
	float:left;
	margin: 0% 0 0% 0%;
}
.col-np:first-child { margin-left: 0; }

/*  GROUPING  */
.group-np:before,
.group-np:after { content:""; display:table; }
.group-np:after { clear:both;}
.group-np { zoom:1; /* For IE 6/7 */ }
/*  GRID OF TWELVE  */
.span_12_of_12-np {
	width: 100%;
}

.span_11_of_12-np {
  	width: 91.66%;
}
.span_10_of_12-np {
  	width: 83.33%;
}

.span_9_of_12-np {
  	width: 75%;
}

.span_8_of_12-np {
  	width: 66.66%;
}

.span_7_of_12-np {
  	width: 58.33%;
}

.span_6_of_12-np {
  	width: 50%;
}

.span_5_of_12-np {
  	width: 41.66%;
}

.span_4_of_12-np {
  	width: 33.33%;
}

.span_3_of_12-np {
  	width: 25%;
}

.span_2_of_12-np {
  	width: 16.66%;
}

.span_1_of_12-np {
  	width: 8.333%;
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col-np {  margin: 1% 0 1% 0%; }
    
    .span_1_of_12-np, .span_2_of_12-np, .span_3_of_12-np, .span_4_of_12-np, .span_5_of_12-np, .span_6_of_12-np, .span_7_of_12-np, .span_8_of_12-np, .span_9_of_12-np, .span_10_of_12-np, .span_11_of_12-np, .span_12_of_12-np {
	width: 100%; 
	}
}

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 0% 0 0.5% 0.5%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/*  GRID OF TWELVE  */
.span_12_of_12 {
	width: 100%;
}

.span_11_of_12 {
  	width: 91.62%;
}
.span_10_of_12 {
  	width: 83.25%;
}

.span_9_of_12 {
  	width: 74.87%;
}

.span_8_of_12 {
  	width: 66.5%;
}

.span_7_of_12 {
  	width: 58.12%;
}

.span_6_of_12 {
  	width: 49.75%;
}

.span_5_of_12 {
  	width: 41.37%;
}

.span_4_of_12 {
  	width: 33%;
}

.span_3_of_12 {
  	width: 24.62%;
}

.span_2_of_12 {
  	width: 16.25%;
}

.span_1_of_12 {
  	width: 7.875%;
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
    
    .span_1_of_12, .span_2_of_12, .span_3_of_12, .span_4_of_12, .span_5_of_12, .span_6_of_12, .span_7_of_12, .span_8_of_12, .span_9_of_12, .span_10_of_12, .span_11_of_12, .span_12_of_12 {
	width: 100%; 
	}
}
    <!DOCTYPE html>
<html lang="en-US">
<head>

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>XXX |  </title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<meta name="Description" content="">
<meta name="Keywords" content="">
<meta property="og:title" content="">
<meta property="og:site_name" content="">
<meta property="og:url" content="">
<meta property="og:description" content="">
<meta property  ="fb:app_id" content="">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="" />
<meta name="twitter:title" content="" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="" />

<link href="https://necolas.github.io/normalize.css/3.0.3/normalize.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
<link href="grid.css" rel="stylesheet" type="text/css">
<link href="no-sp-grid.css" rel="stylesheet" type="text/css">
<link href="color.css" rel="stylesheet" type="text/css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Neuton:400,200,700,300' rel='stylesheet' type='text/css'>

</head>

<body>
	<br>	
	<div class="container-page-80">
		<div class="section group">
			<div class="col span_2_of_12 height-40px">
				<img src="xdfd" class="main-logo" />
			</div>
			<div class="col span_6_of_12 height-40px">
				<input type="text" class="search-bar sanserif thin" placeholder="Search for items you are looking for..." >
			</div>
			<div class="col span_1_of_12 height-40px text-right">
				<button class="sign-in">Sign In</button>
			</div>
			<div class="col span_1_of_12 height-40px text-right">
				<button class="sign-in">Register</button>
			</div>
			<div class="col span_2_of_12 height-40px text-right">
			<button class="start-selling">START SELLING</button>
			</div>
		</div>
	</div>

	<div class="page-container-100">
		<div class="section group">
			<div class="col span_12_of_12 height-75 puma">
				<div class="section-np group-np">
					<div class="col-np span_8_of_12-np">x
					</div>
					<div class="col-np span_4_of_12-np">
						<div class="section-np group-np">
							<div class="col-np span_12_of_12-np">y
							</div>
							<div class="col-np span_12_of_12-np">z
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

</body>

</html>

    1 回复  |  直到 7 年前
        1
  •  0
  •   A. L    7 年前

    我不明白,怎么了 position: absolute 

    /* text types */
h1{font-family: 'Open Sans', Arial, sans-serif; margin: 0; font-size: 24px; line-height: 125%;}
h2{font-family: 'Neuton', serif; margin: 5px 0px 10px 0px; font-size: 24px; font-weight: 200; line-height: 120%;}
h3{font-family: 'Open Sans', Arial, sans-serif; margin: 8px 0px 2px 0px; font-size: 16px; line-height: 130%; font-weight: 600;}
h4{font-family: 'Neuton', serif; font-size: 16px; margin: 2px 0px 6px 0px; line-height: 120%; font-weight: 200;}
h5{font-family: 'Open Sans', Arial, sans-serif; margin: 0; font-size: 12px;}
h6{font-family: 'Open Sans', Arial, sans-serif; font-size: 10px;}

/* links */
a, a:hover, a:visited, a:active{text-decoration: none; outline: none; color: inherit;}
a.underline:hover{text-decoration: underline; color: inherit;}
a.readMore{font-family: 'Raleway', serif; font-size: 15px; margin: 15px 0px 0px 0px; font-weight: 700; color: #428bca;}
.thinner{
	font-weight: 200;
}
.thin{
	font-weight: 300;
}
.normal{
	font-weight: 400;
}
.bold{
	font-weight: 500;
}
.bolder{
	font-weight: 600;
}
.boldest{
	font-weight: 700;
}

.sanserif{
	font-family: 'Open Sans', Arial, sans-serif;
}

/* align */
.text-left{
	text-align: left;
}
.text-right{
	text-align: right;
}

/* body */
body, html{
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
}
.container-page-80{
	width: 80%;
	position: relative;
	margin: auto;
}
.container-page-100{
	width: 100%;
	position: relative;
	margin: auto;
}


/* height adj */
.height-100{
	height: 100%;
	position: absolute;
}
.height-75{
	height: 75%;
	position: absolute;
}
.height-50{
	height: 50%;
	position: absolute;
}
.height-40px{
	height: 40px;
}

/* positions */
.fixed{
	position: fixed;
}
.vert-align-1{
	vertical-align: text-bottom;
}

/* images */
img.main-logo{
	height: 35px;
}

/* inputs */
input[type=text].search-bar{
	outline: none;
	height: 28px;
	padding: 0px 6px;
	width: 93%;
	outline: none;
	border: 1px solid rgba(0,0,0,.1);
	font-size: 15px;
	letter-spacing: 0.5px;
	border-radius: 5px;
	opacity: .8;
	-webkit-transition: all 250ms ease-out;
	-moz-transition: all 250ms ease-out;
	-ms-transition: all 250ms ease-out;
	-o-transition: all 250ms ease-out;
	transition: all 250ms ease-out;
}
input[type=text].search-bar:focus{
	color: black;
	opacity: 1;
}
input[type=text].search-bar:hover{
	color: black;
	opacity: 1;
}
button.start-selling{
	height: 30px;
	outline: none;
	background: none;
	border-radius: 5px;
	border: 1px solid transparent;
	font-size: 12px;
	color: white;
	padding: 0px 12px;
	letter-spacing: 1px;
	background-color: #9059b2;
	opacity: .9;
	-webkit-transition: all 250ms ease-out;
	-moz-transition: all 250ms ease-out;
	-ms-transition: all 250ms ease-out;
	-o-transition: all 250ms ease-out;
	transition: all 250ms ease-out;
}
button.start-selling:hover{
	opacity: 1;
}
button.sign-in{
	height: 30px;
	outline: none;
	background: none;
	border-radius: 5px;
	border: 1px solid transparent;
	font-size: 12px;
	color: black;
	font-weight: 700;
	padding: 0px 12px;
	letter-spacing: 1px;
	background-color: none;
	opacity: .9;
	-webkit-transition: all 250ms ease-out;
	-moz-transition: all 250ms ease-out;
	-ms-transition: all 250ms ease-out;
	-o-transition: all 250ms ease-out;
	transition: all 250ms ease-out;
}
.puma{
	background-color: red;
}






/*  SECTIONS  */
.section-np{
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col-np {
	display: block;
	float:left;
	margin: 0% 0 0% 0%;
}
.col-np:first-child { margin-left: 0; }

/*  GROUPING  */
.group-np:before,
.group-np:after { content:""; display:table; }
.group-np:after { clear:both;}
.group-np { zoom:1; /* For IE 6/7 */ }
/*  GRID OF TWELVE  */
.span_12_of_12-np {
	width: 100%;
}

.span_11_of_12-np {
  	width: 91.66%;
}
.span_10_of_12-np {
  	width: 83.33%;
}

.span_9_of_12-np {
  	width: 75%;
}

.span_8_of_12-np {
  	width: 66.66%;
}

.span_7_of_12-np {
  	width: 58.33%;
}

.span_6_of_12-np {
  	width: 50%;
}

.span_5_of_12-np {
  	width: 41.66%;
}

.span_4_of_12-np {
  	width: 33.33%;
}

.span_3_of_12-np {
  	width: 25%;
}

.span_2_of_12-np {
  	width: 16.66%;
}

.span_1_of_12-np {
  	width: 8.333%;
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col-np {  margin: 1% 0 1% 0%; }
    
    .span_1_of_12-np, .span_2_of_12-np, .span_3_of_12-np, .span_4_of_12-np, .span_5_of_12-np, .span_6_of_12-np, .span_7_of_12-np, .span_8_of_12-np, .span_9_of_12-np, .span_10_of_12-np, .span_11_of_12-np, .span_12_of_12-np {
	width: 100%; 
	}
}

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 0% 0 0.5% 0.5%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/*  GRID OF TWELVE  */
.span_12_of_12 {
	width: 100%;
}

.span_11_of_12 {
  	width: 91.62%;
}
.span_10_of_12 {
  	width: 83.25%;
}

.span_9_of_12 {
  	width: 74.87%;
}

.span_8_of_12 {
  	width: 66.5%;
}

.span_7_of_12 {
  	width: 58.12%;
}

.span_6_of_12 {
  	width: 49.75%;
}

.span_5_of_12 {
  	width: 41.37%;
}

.span_4_of_12 {
  	width: 33%;
}

.span_3_of_12 {
  	width: 24.62%;
}

.span_2_of_12 {
  	width: 16.25%;
}

.span_1_of_12 {
  	width: 7.875%;
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
    
    .span_1_of_12, .span_2_of_12, .span_3_of_12, .span_4_of_12, .span_5_of_12, .span_6_of_12, .span_7_of_12, .span_8_of_12, .span_9_of_12, .span_10_of_12, .span_11_of_12, .span_12_of_12 {
	width: 100%; 
	}
}
    <!DOCTYPE html>
<html lang="en-US">
<head>

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>XXX |  </title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<meta name="Description" content="">
<meta name="Keywords" content="">
<meta property="og:title" content="">
<meta property="og:site_name" content="">
<meta property="og:url" content="">
<meta property="og:description" content="">
<meta property  ="fb:app_id" content="">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="" />
<meta name="twitter:title" content="" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="" />

<link href="https://necolas.github.io/normalize.css/3.0.3/normalize.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
<link href="grid.css" rel="stylesheet" type="text/css">
<link href="no-sp-grid.css" rel="stylesheet" type="text/css">
<link href="color.css" rel="stylesheet" type="text/css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Neuton:400,200,700,300' rel='stylesheet' type='text/css'>

</head>

<body>
	<br>	
	<div class="container-page-80">
		<div class="section group">
			<div class="col span_2_of_12 height-40px">
				<img src="xdfd" class="main-logo" />
			</div>
			<div class="col span_6_of_12 height-40px">
				<input type="text" class="search-bar sanserif thin" placeholder="Search for items you are looking for..." >
			</div>
			<div class="col span_1_of_12 height-40px text-right">
				<button class="sign-in">Sign In</button>
			</div>
			<div class="col span_1_of_12 height-40px text-right">
				<button class="sign-in">Register</button>
			</div>
			<div class="col span_2_of_12 height-40px text-right">
			<button class="start-selling">START SELLING</button>
			</div>
		</div>
	</div>

	<div class="page-container-100">
		<div class="section group">
			<div class="col span_12_of_12 height-75 puma">
				<div class="section-np group-np">
					<div class="col-np span_8_of_12-np">x
					</div>
					<div class="col-np span_4_of_12-np">
						<div class="section-np group-np">
							<div class="col-np span_12_of_12-np">y
							</div>
							<div class="col-np span_12_of_12-np" style="position: absolute; top: 50%;">z
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

</body>

</html>
    推荐文章
    Softly  ·  单选按钮未按预期取值
    1 年前
    NovoMannen  ·  导航中的下拉菜单在内容后面重叠
    1 年前
    Thirumal isireddy  ·  在导航栏顺风css中,img被扭曲,而不是将元素推到旁边
    1 年前
    eXor420  ·  如何在脚本标记中使用导出的函数?
    1 年前
    Hadi  ·  如何在无效和有效输入中选择用于更改样式的psoudo元素(after)
    1 年前
    IonicMan  ·  剑道网格在宽度过大时不显示某些列
    1 年前
    Kernier  ·  如何将数学公式支持添加到StacksEditor?
    1 年前
    Md. Ibrahim  ·  CSS网格项溢出小屏幕滚动
    1 年前
    Arjun V Srivatsa  ·  如何将系统时区信息分配给javascript中的变量?
    1 年前
    Akshay mek  ·  Vscode扩展建议不适用于某些文件夹
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号