div가 100 % 너비이고 높이가 180px 인 헤더가 있습니다.div의 까다로운 위치 지정 및 크기 조정
아래에 흰색 배경이있는 div가 바로 아래에있는 div를 원하는 경우 - 콘텐츠 div. 내가 구현 한 방식은 콘텐츠 창안이 탐색 창 아래에 항상 180px (거의 브라우저 창 크기와 상관없이 180px 스크롤 다운과 비슷 함)라는 것입니다.
이전에 오버플로 : 숨김 켜기를 시도했지만 실제 콘텐츠의 경우이 기능을 사용하지 않으려면 아래로 스크롤해야 할 수 있습니다.
사람이 이에 대응하는 방법을 알고 있나요 : 아래
는 내가 원하는 걸의 도면이다?편집 :
사과하지 않는 것에 대한 사과. 모든 상황에서 창의 하단으로 콘텐츠 div를 늘려야하지만 100 % 값을 설정하면 헤더가 눌려지기 때문에 뷰포트 아래로 180px만큼 좋지 않습니다.
<!DOCTYPE html><html><head></head><body style='background:black;'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:180px;' align='center'><div style='width:900px;background:blue;'>content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div></div>
<div style='position:absolute;width:100%;height:180px;left:0px;top:0px;background:white;;'>header</div>
</body></html>
버전 2.0 (롤 hahah) :
<!DOCTYPE html><html><head></head><body style='background:black;'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='center'>
<div style='width:900px;height:100%;background:blue;' align='center'>
<div style='position:fixed;width:900px;height:100%;background:blue;display:block;' align='center'>
</div>
</div>
</div>
<div style='position:absolute;width:100%;left:0px;top:180px;' align='center'>
<div style='width:900px;' align='center'>
hello<br><br><br><br><br><br><br><br>aaa<br><br><br><br><br><br><br><br><br><br><br><br>bbb<br><br><br><br><br><br><br><br><br><br>ccc<br><br><br><br><br><br><br>ddd<br><br><br><br><br><br><br><br><br
><br><br><br>eee
</div>
</div>
<div style='position:absolute;width:100%;height:180px;left:0px;top:0px;background:white;;'>header</div>
</body></html>
그것을 시도하고 난이 당신을 위해 무엇을 찾고 생각! :) 그래서 먼저 전체 화면을 채우기 위해 100 % 너비와 높이 div를 추가하고 중앙에 위치하는 div 안에는 div와 900의 너비를 추가하면 여기에 모든 내용이 표시됩니다. 그 후에 헤더를 100 % 너비와 180 높이로 추가하면 모든 div 위치가 절대적이므로 각 행이 어디에 입력되는지 입력 할 수 있습니다. 상단 0px는 헤더에 대해 0px를 남기고 컨텐츠 상단에는 180px가 남았으므로 헤더 다음에 나옵니다. :)
포맷 할 수 있습니까? 내가 뭘보고 있는지 전혀 모르겠다. –
html의 내용 아래에 헤더를 정의한 다음 맨 위에 CSS를 정의하는 것을 의미합니까? –
좋았지 만 이것은 내가 겪어 왔던 쟁점 중 하나이다. 파란색이 단지 단어 주위를 쭉 뻗는다. http://jsfiddle.net/ygtvZ/ –
position: relative; top: 0; bottom: 0; 콘텐츠 div에 있습니다. 이것을 바닥까지 늘려야합니다.
http://jsfiddle.net/K5pYe/16/ - –
이 내용은 콘텐츠 컨테이너와 콘텐츠 컨테이너 div가 있어야하며 콘텐츠가 포함 된 컨테이너가 있어야합니다. :) 당신은 당신이 원하는 것을 얻을 때까지 이들과 함께 바이올린을해야 할 것입니다. 그러나 주된 이슈는 각 요소에 대한 바닥과 0의 위치를 사용하는 것입니다.
content {bottom:0; min-height:180px; position:absolute;}
content-container {position:relative;}
당신이 생각하는 한 가지 중요한 사실은 body와 html 요소가 너비와 높이가 100 %로 설정되어야한다는 것입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: gray;
}
#header {
background: red;
height: 100px;
width: 100%;
}
#main {
background: blue;
height: 100%;
width: 400px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="main"></div>
</body>
</html>
당신이 그것을 실행하는 경우, 당신이 볼 수있는 유일한 문제는 스크롤 막대가 표시 있다는 것입니다 :
이 예제에서 보라. 그게#main div가 창 높이를 가지며 헤더에서 100px가 더 많기 때문입니다.
내가 제안하는 해결책은 헤더를 메인 div 위로 부순 다음안에 또 다른 div를 추가하는 것입니다. 따라서 절대적으로 100px 벨로우즈에 배치되므로 많은 문제없이 그 내부에서 작업 할 수 있습니다. 전체 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: gray;
}
#header {
background: red;
height: 100px;
width: 100%;
position: absolute;
top: 0;
z-index: 20;
}
#main {
background: blue;
height: 100%;
width: 400px;
margin: 0 auto;
position: relative;
z-index: 10;
}
#main #content {
position: absolute;
top: 100px;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="main">
<div id="content">
<p style="margin:0">Paragraph</p>
</div>
</div>
</body>
</html>
재설정 파일을 사용해야합니다. 단락 요소와 같은 여백은 레이아웃을 상당히 엉망으로 만듭니다.
업데이트 : 이 솔루션은 오버플로 문제를 유발합니다.
#main {
background: blue;
min-height: 100%; /* Changed */
width: 400px;
margin: 0 auto;
position: relative;
z-index: 10;
}
#main #content {
padding-top: 100px; /* Changed */
}
을 그리고 마크 업 (마지막 예제와 같은) 이런 식으로되어 있는지 확인 : 다음과 같이
변경이 개 CSS 블록 : 그래서 여기에 더 나은 버전입니다
<div id="header"></div>
<div id="main">
<div id="content">
<!-- Content goes here -->
</div>
</div>
그해야 트릭을해라!
이 아닙니다. 오버플로 문제가 있습니다. http://jsfiddle.net/7kXZT/2/ –
답장을 방금 업데이트했습니다. – sidyll
나는 스티키 바닥 글 http://ryanfait.com/sticky-footer/과 동일한 기술을 사용했습니다. 이 바이올린을 확인하십시오 http://jsfiddle.net/kuyabiye/K5pYe/
실제 질문은 무엇입니까? – Spliffster
'overflow : scroll'? – Eray
그는 컨텐츠 뷰어가 항상 브라우저 뷰포트의 아래쪽으로 확장되기를 원합니다. – Chris