4
현재 웹 사이트 템플릿을 디자인하고 있는데 문제는 그 안에있는 내용을 자동으로 확장하도록 콘텐츠 div를 가져올 수 없다는 것입니다.CSS 내용 만들기 DIV 내용 뒤에 자동 크기
수동으로 CSS 높이를 설정할 필요가 없도록 자동 크기 조정을 원했습니다.
내가 만든 CSS 코드 :
#Container {
position: relative;
width: 800px;
height: 100%;
margin: 0px auto 0 auto;
text-align: left;
padding-left: 1px;
cursor: de;
border-left: 1px solid #000001;
border-right: 1px solid #000001;
border-top: 1px solid #000001;
border-bottom: 1px solid #000001;
background-color: #C1E9FF;
}
#LogoContainer {
background-image: url('/media/Logo.png');
border-right-width: 1px;
border-bottom-width: 1px;
border-right-color: rgb(0,0,1);
border-bottom-color: rgb(0,0,1);
border-right-style: solid;
border-bottom-style: solid;
width: 400px;
height: 50px;
position: absolute;
z-index: 1;
}
#LikeBar {
border-bottom-width: 1px;
border-bottom-color: rgb(0,0,1);
border-bottom-style: solid;
width: 400px;
height: 50px;
position: absolute;
left: 400px;
z-index: 1;
}
#ButtonHome {
background-image: url('/media/Bt.png');
width: 100px;
height: 30px;
position: absolute;
top: 50px;
z-index: 1;
}
#ButtonVideo {
background-image: url('/media/Bt.png');
width: 100px;
height: 30px;
position: absolute;
left: 105;
top: 50px;
z-index: 1;
}
#Footer {
border-top-width: 1px;
border-top-color: rgb(0,0,1);
border-top-style: solid;
width: 800px;
position: absolute;
bottom: 0;
z-index: 1;
text-align: center;
}
#Content {
position: absolute;
top: 90px;
width: 800px;
height: 95%;
border-top: 1px solid #000001;
}
#YouTubeBox {
position: absolute;
background-image: url('/media/Box.png');
width: 100px;
height: 30;
left: 10px;
text-align: center;
}
#TwitterBox {
position: absolute;
background-image: url('/media/Box.png');
width: 100px;
height: 30;
left: 110px;
text-align: center;
}
#FaceBookBox {
position: absolute;
background-image: url('/media/Box.png');
width: 100px;
height: 30;
left: 210px;
text-align: center;
}
.DivT { line-height: 1px }
HTML 코드 DIV
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />
<title>HTML CODE</title>
<meta name="description" content="Null" />
<meta name="keywords" content="Null" />
<link href="ThemeV1.css" rel="stylesheet" type="text/css" />
</head>
<body background="/media/Background.png">
<div id="Container">
<!-- Start Container -->
<div id="LogoContainer"></div>
<div id="LikeBar"></div><!-- Menu Controls -->
<div id="ButtonHome"></div><!-- WEBSITE CONTENT -->
<div id="Content">
<p class="DivT">We're upgrading the website with a new design and hopefully it will
be faster, so check back later.</p>
</div><!-- END WEBSITE CONTENT -->
<!-- Footer -->
<div id="Footer"></div><!-- End Footer -->
</div><!-- End Container -->
</body>
</html>
그래서, 무슨이다와? 나는 수동으로 높이를 설정하지 않는 시간을 절약하고 싶습니다.
#Content {
...
height: 95%;
가 height를 제거하고 높이가 (비 떴다) 내용을 유지하는 것이 필요하다 무엇 이건 될 것입니다 : 당신이 수동으로 콘텐츠 높이의 높이를 설정해야 처럼
게시자가 게시 한 CSS를 검토하고 읽는 사람이 있습니까? 질문을 게시 할 때 독자를 고려하십시오. 도움말은 [여기] (http://jsbeautifier.org/), [여기] (http://procssor.com/process) 및 [여기] (http://infohound.net/tidy/)입니다. – Bojangles
높이 변경 시도 : 최소 높이 95 % : 95 % – ptriek
및 [여기] (http://jsfiddle.net)! – MCSI