내 열의 높이를 어떻게 설정합니까?

저는 전문적인 웹 개발자는 아니지만 비영리 조직을 돕기 위해 설계하고 있습니다. 나는 css, float, position 등에 대한 지침과 설명을 웹에서 검색하는 데 며칠을 보냈다. 마침내 내가 원하는 동작으로 원하는 레이아웃을 디자인 할 수 있었지만 작동하지 않는 무언가가 여전히 남아있다. 알다. "http://www.missione-berna.ch/index2.php"및 해당 출처의 페이지를 참조하십시오. 내가 액세스 할 수 있도록 모든 코드를 넣어 (최종 stiles, 스크립트, 메뉴 및 헤더는 결국 PHP를 통해 포함 된 별도의 파일에있을 것입니다). 내 "메뉴"div의 내용 크기가 이웃 "Contenuto"div의 크기가 아닙니다. 두 div 열 일치 높이를 갖는 것이 쉬운 일이 아니라는 것을 알았지 만,이 "중도"크기는 어디에서 오는 것입니까? 도와 주신 모든 도움을 받으십시오.내 열의 높이를 어떻게 설정합니까?

출처

2012-01-02 rodedo

"간단한"등 높이 열을 만드는 방법에 대한 자세한 내용은 http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks를 확인하십시오. 매우 편리한 기술입니다. –

감사합니다. 나는 여전히 그렇게함으로써 배우기 위해 그렇게 실험하고있다. – rodedo

우선 position: absolute은 매우 나쁜 것일 수 있습니다. 페이지 흐름에서 요소를 가져 오지 않는 한 피하십시오 (한 요소가 다른 요소 위에 표시됨).

둘째, height: 100%은 직관적으로 생각하지 않습니다. 메뉴 div의 높이를 페이지 뷰 높이 (브라우저 창)의 100 %가 아닌 전체 페이지의 100 %가 아닌 100 %로 설정합니다.

메뉴의 배경이 단순하기 때문에 동일한 높이로 보이게 만드는 멋진 트릭이 있습니다. CSSDesk

메뉴 및 콘텐츠 주위에 래퍼 div를 추가했습니다. HTML의 관련 비트 :

<body> 
<div id="Fascione"> 
    <img id="FotoAngolare" alt="ChiesaEsterno" src="images/esterno.jpg" width="195" height="122"> 
    <div id="Impressum"> 
     <span class="Intestazione">Missione Cattolica Italiana</span><br> 
     <span class="Titolo">Chiesa "Madonna degli Emigrati"</span><br> 
     <span class="Testo">Bovetstrasse 1 - 3007 Bern<br>Tel. 031 371 0243/Fax. 031 372 1656</span><br> 
     <a class="Email" href="mailto:[email protected]">[email protected]</a> 
    </div> 
</div> 
<div id="wrap"> 
<div id="Menu"> 
    <a href="top"></a> 
    <ul id="MenuList" class="Testo"></ul> 
<div id="Contenuto"> 
<p></p> 
</div> 
</div> 
</body>

그래서처럼 스타일 :

#wrap { background: #e8e8e8; } 
#Menu {float:left; width:195px; } 
#Contenuto { background: #fff; border-left: 2px solid black; margin-left: 196px; min-width:829px; padding: 1px 1px 1px 15px; }

그래서 전체 것은 회색 배경이있다. 메뉴가 회색 배경 위에 떠있었습니다. contentuo div에는 메뉴를 "지우려면"192px의 왼쪽 여백이 있고 회색을 숨기려면 흰색 배경이 있습니다. 래퍼 및 컨텐트 div와 회색/흰색 배경은 컨텐트의 크기로 확장됩니다.

몇 가지 팁 :

이 height: 100%에주의하십시오.
float: left 또는 float: right 은 본질적으로 display: block으로 설정됩니다. 부동 요소 인 에 display: inline을 설정할 수 없습니다. 메뉴 및 min- 100 % :
```
<div class="wrapper"> 
    <div class="Fascione">...</div> 
    <div class="Menu">...</div> 
    <div class="Contenuto">...</div> 
</div> 
```
그리고 높이 :

출처

2012-01-02 16:14:01 benesch

나는이 충고하는 것을 피할 것이다 : * position : 절대적인 것은 아주 나쁜 것이다. 가능하면 피하십시오.* '포지션 : 절대적인 것'이 필요하고 좋은 경우가 많이 있습니다. –

절대 위치를 사용하는 데는 아무런 문제가 없습니다. 절대적이며 매우 나쁜 것임을 나타내는 것은 매우 나쁜 것입니다. – Rob

먼저, 설명해 주셔서 감사합니다. – rodedo

내가 가장 쉬운 방법은이 같은 래퍼 DIV에 모든 것을 넣어 acomplish하는 것입니다 무슨 말을 하려는지 acomplish 것을 생각 메뉴와 Contenuto의 높이.

출처

2012-01-02 16:39:15 aurel

래퍼의 "스타일"은 무엇입니까? Menu에 대한 높이와 최소 높이 설정의 효과는 무엇입니까? – rodedo

나는 아무 효과없이 이것을 시도했다 ... – rodedo

height : 100 %는 부모 div를 채우고 min-height는 x 픽셀보다 짧아 야한다. 나중에 다시 한번 살펴보고 무엇이 잘못되었는지 확인해 보겠습니다. – aurel

내 열의 높이를 어떻게 설정합니까?

답변

관련 문제