css 전체 크기 조정 레이아웃
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>1-2-1 </title>
<meta name="description" content="">
<meta name="keywords" content="">
<style type="text/css">
*{
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
min-height: 100%;
_height:100%;
height:100%;
}
body {
min-height: 100%;
_height:100%;
height:100%;
/*background: #ff0000;*/
}
#all {
background: #EEE;
border-left: 1px solid #ff0000;
border-right: 1px solid #ff0000;
padding: 0 20px 0 20px;
margin: auto;
font: 1.5em arial, verdana, sans-serif;
width: 85%;
min-height: 100%;
_height:100%;
}
#header,#pagefooter,#container {
margin: 0 auto;
width: 85%;
border: 1px solid #000000;
}
#content {
float: right;
width: 66%;
border: 1px solid green;
}
#side {
float: left;
width: 33%;
border: 1px solid blue;
}
.clearfix::before {
content: "";
display: table;
width: 0;
height: 0;
overflow: hidden;
}
.clearfix::after {
content: "";
clear: both;
display: table;
width: 0;
height: 0;
overflow: hidden;
}
.clearfix {
zoom: 1;
}
</style>
</head>
<body>
<div id="all">
<div id="header">
</div>
<div id="container" class="clearfix">
<div id="content"> </div>
<div id="side"> </div>
</div>
<div id="pagefooter">
</div>
</div>
</body>
</html>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue-cli 이동단 레이아웃 및 애니메이션 사용 상세 정보vue-cli(중점) vue-cli는 vue 프로젝트를 관리하는 도구로 vue-cli를 사용하여 프로젝트를 신속하게 만들고, 프로젝트를 시작하고, 프로젝트를 컴파일하는 등 작업을 할 수 있습니다. vue의 단일 파일...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
