1
HTML 및 CSS로 재생 중입니다. 나는 순간에 다음과 같은 한 :내용에 따라 DIV 태그의 크기가 달라짐
/*Reset margins & padding*/
body, h1, h2, h3, h4, h5, h6, p, div, ul, li {
margin: 0;
padding: 0;
}
body {
background: #CCCCCC;
font-family: sans-serif;
color: #000;
}
#divWrapper {
width: 90%;
margin: 0 auto;
}
#divHeader {
width: 100%;
background: #CC0000;
text-align: center;
/* Margins */
margin-top: 20px;
margin-bottom: 0px;
/* Radius */
border-radius: 5px;
}
#divMenuStrip {
width: 100%;
background: #646464;
text-align: center;
/* Margins */
margin-top: 10px;
/* Padding */
padding-left: 5px;
padding-right: 5px;
/* Radius */
border-radius: 5px;
}
#divContent {
width: 100%;
background: #ffffff;
/* Margins */
margin-top: 10px;
/* Padding */
padding: 8px;
/* Radius */
border-radius: 5px;
}
과를 ... 내 웹 브라우저에서 HTML 페이지를로드 할 때 사업부 내에서 컨텐츠의 양에 따라 것처럼
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./styles/main.css">
</head>
<body>
<div id="divWrapper">
<div id="divHeader"><img src="./images/headers/header-1.jpg" /></div>
<div id="divMenuStrip">This is where the menu will be displayed</div>
<div id="divContent">This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. </div>
</div>
</body>
</html>
가 나타납니다 텍스트 인 태그가 내 div 태그의 크기에 영향을줍니다.
왜 이것이 사람인지 밝힐 수 있습니까? 감사!!!
높이를 설정하십시오. – ShibinRagh
좀 더 구체적으로 알려주시겠습니까? 본질적으로 div와 기타 요소는 내용을 수용 할 수 있도록 확장됩니다. (위에서 설명한 것처럼 높이를 설정하는 것은 피하십시오. 대부분 레이아웃 재난을위한 방법입니다.) –
미안한 높이 설정? 전체 사이트의 콘텐츠를 페이지의 90 %로 제한하려고합니다 (래퍼가 90 %로 설정됨에 따라). 그런 다음 다른 모든 div가 전체 폭이되도록합니다. 전체 화면 해상도의 90 %입니다. – vlocity160