div의 높이가 동적으로 늘어나지 않습니다.

나는 이것에 대한 대부분의 게시물을 검토했지만 도움이되지 않았습니다.div의 높이가 동적으로 늘어나지 않습니다.

나는 그것이 윈도우의 길이를 맞는 아이에 적용이 너무을 div를하도록 div퍼센트 100 에 높이을 증가해야합니다.

#container{ 
    width: 75%; 
    background-color: silver; 
    background-position: center; 
    min-height: 100px; 
    overflow : hidden; 
    margin: 0 auto; 
} 

#header{ 
    background-color:infotext; 
} 

h1{ 
    margin-bottom: 0; 
    color: white; 
} 

#list{ 
    width: 20%; 
    background-color:window; 
    float: left; 
    height:100%; 
} 
#links{ 
    width: 55%; 
}

코드 :

<body> 
    <div id="container"> 
     <div id="header"> 
      <h1 align="center">Represent</h1> 
     </div> 
     <div id="list"> 
      <span><h4>Fruits</h4></span> 
      <hr> 
      <p>Apple</p><br> 
      <p>Mango</p><br> 
      <p>Orange</p> 
     </div > 
     <div id="links"> 
     <iframe src="http://www.google.co.in" frameborder="0"> 
     </iframe> 
     </div> 
    </div> 
</body>

문제가 container div과 divs의 나머지는 iframe 크기가 크고 따라서, scrollbar 나타납니다 경우에도 확장하지 않습니다. 어떤 해결책?

또 다른 문제 :

가

iframe이의 사업부는 전체 폭을 차지하지 않습니다. #list에 20 %, #link에 55 %를 할당하여 부모 div #container 75 %에 맞 춥니 다. 이것은 일어나지 않는다 !!

html, body, .full-height { 
    height: 100%; 
} 

body { 
    margin: 0; // <-- to avoid unnecessary scrollbars. 
}

이

그런 다음 바로 full-height을 추가

이 CSS를 추가

출처

2013-02-07 Mercenary

브라우저 창? – Milind

아니요, div 안에 iframe이 있고 왼쪽에는 목록이 있습니다. div (iframe 포함)가 전체 공간을 채우는 경우 너비 만 남기고 싶습니다. – Mercenary

당신은 <html> 및 <body> 요소뿐만 아니라 전체 높이를 차지하려는 자식 요소에 height: 100%;을 설정해야 클래스를 컨테이너의 전체 높이를 차지하려는 요소에 추가합니다. 이 문제의 데모를 제공하거나 내가 당신의 모든 문제와 함께 당신을 도울 수에

당신이 필요합니다. 하지만

몇 가지 팁 :

가 align 속성을 사용하지 마십시오. 더 이상 사용되지 않습니다. CSS 플로트를 대신 사용하십시오.
infotext 또는 window CSS 색상 값을 사용하지 마십시오. 그것들은 system colors입니다. 모든 시스템 색상은 특정 OS/브라우저 조합에서만 작동하므로 더 이상 사용되지 않습니다. valid color keywords 중 하나를 사용하거나 16 진수/rgb 표기법을 사용하십시오.
시각적 간격을 위해 <br> 태그를 사용하지 마십시오. 대신 CSS 여백을 사용하십시오.
<h4>과 같은 블럭 레벨 요소를 <span>과 같은 인라인 요소 안에 넣지 마십시오.
iframe을 사용하는 것이 좋은 아이디어는 거의 없습니다. 문제를 다시 생각해보고 대체 솔루션을 찾을 수 있는지 확인하십시오.
#header 요소를 실제 <header> 요소로 만듭니다.IE8-을 지원하려면이 답변 맨 아래 JS 스 니펫을 JS에 추가하십시오.
#list 요소를 실제 list element (<ul>)으로 설정하십시오. 목록의 기본 스타일이 마음에 들지 않으면이 답의 맨 아래에있는 CSS 스 니펫을 사용하여 재설정하십시오.

JS는 니펫을 :

document.createElement('header');

CSS 조각 : u는 u는 경우 추가 포함거나 수정 동적으로 DIV 폭을 늘리려면 원하는 것은

ul.reset, 
ol.reset { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
}

출처

2013-02-07 05:27:07

부모 컨테이너의 여백을 사용하면 정확한 위치 지정을 사용하면 불필요한 스크롤 막대가 생기지 않습니다. –

@ Mr.Alien ''요소 높이를 100 %로 설정하면 설정하지 않으면 스크롤바가 생깁니다. 대부분의 브라우저는 ''요소에 기본 8px 패딩을 제공하기 때문에 여백은 0입니다. –

팁 주셔서 감사합니다! 사실, 나는 마진을 두지 않았다 : 모든 div에 100 % 높이를 두는 것으로 몸에 0이 도움이되었다. , 여백 : 0은 페이지의 스크롤 막대를 피할 수 있습니다. 또한, overflow : 부모 div를 넘어서서 한 div에 숨겨져 있고 iframe의 높이를 100 %로 설정해야했습니다. iframe의 스크롤 막대를 피할 수 있습니다. – Mercenary

div의 높이가 동적으로 늘어나지 않습니다.

답변

관련 문제