CSS div 위치 지정

-1

div가 2 개 포함되어 있습니다. 자식 div 중 하나는 정적 높이 2em을 가지고 있고 다른 하나는 부모 div의 나머지 공간을 수직으로 채우고 싶습니다. 어떻게해야합니까?CSS div 위치 지정

편집 : 화면을 채우기 위해 부모 div가 필요합니다.

2010-02-08 Chetan

이것은 달성하려는 목표에 따라 다릅니다. 컨테이너가 두 어린이를 위해 필요한만큼 큰 고정 된 상단 및 변수 하단 가져 오기.

<div id="parent"> 
    <div id="top"></div> 
    <div id="bottom"></div> 
</div>

사용 :

가정

#top { height: 2em; }

을하고있을 필요로 바닥 사업부가 큰 것입니다. 하단 고정 높이를 만들 수 있으며 동일한 것을 얻을 수 있습니다.

하지만 내가하고 싶은 일은 외부 div 고정 높이 (100 %)를 사용하는 것입니다. 그것은 훨씬 더 어려워진다. 문제는 CSS에서 (부적절한) CSS 표현을 사용하지 않고 "높이 100 % - 2em"을 말하는 방법이 없다는 것입니다.

하나의 방법은 상단을 하단에 오버레이하는 것입니다.

#outer { position: relative; } 
#top { position: absolute; height: 2em; top: 0; left: 0; width: 100%; } 
#bottm { height: 100%; padding-top: 2em; }

상단 div는 실제로 하단을 오버레이합니다. 국경을 원하지 않는 한 괜찮습니다.

출처

2010-02-08 04:33:16 cletus

오버레이없이이 작업을 수행해야합니다. 'parent'는 body의 100 % 높이가되어야하고,'top'은 2em 높이가되어야하고,'bottom'은 나머지 parent를 채울 필요가 있습니다. 이것이 가능한가? – Chetan

'height : 100 %'* work *는 어떤 문맥에서 사용합니까? – donut

'body'의 높이를 100 %로 설정하면됩니다. – Chetan

이미지를 배경으로 사용하거나 #parent로 배경색을 다시 이동하여 #bottom div로 화면을 채우는 것처럼 보이게하려면 가짜 열을 사용할 수 있습니다. 페이지를 100 % 높이로 채 웁니다 (HTML 및 본문도 높이를 얻는 한 100 %).

예 :

<head> 
    <title>TITLE</title> 
    <style type="text/css"> 
     html, body { height: 100%; margin: 0; padding: 0; } 
     #parent { height: 100%; background: #f08; } 
     #top { height: 2em; background: #80f; } 
    </style> 
</head> 
<body> 
<div id="parent"> 
    <div id="top">TOP DIV</div> 
    <div id="bottom">THE REST</div> 
</div>

CSS 100 % 높이의 모양을주는 막 스타일링 대해 때문에

100 % 높이가 동일하다. 권리?

출처

2010-02-08 04:57:20 mark123

CSS div 위치 지정

답변

관련 문제