CSS를 사용하여 DIV의 동적 크기 조정

컨텐츠 사이드에 맞게 사이드 바 div의 높이를 동적으로 조정하는 데 문제가 있습니다. 여기 다른 여러 가지 질문과 Google 검색을 기반으로 높이를 설정하지 않으면 상위 div 높이를 사용한다고 생각했지만 콘텐츠 높이를 자동으로 맞추는 것처럼 보입니다.CSS를 사용하여 DIV의 동적 크기 조정

이것은 "baradineholdings.com.au"에서 볼 수 있습니다 (사이트를 판단하지 말고, 나는 멍청한 행동입니다.

주로 내용이 없기 때문에 홈 페이지가 멋지게 보입니다. about 페이지로 가면 문제를 볼 수 있습니다. 나는 거의 메인 페이지의 인스턴스에서 콘텐츠 div가 사이드 바 div의 높이를 차지하고 있다고 의심하지만 왜 그런지는 잘 모르겠습니다.

HTML;

<body> 
    <div id="wrapper"> 
     <?php include('includes/header.php'); ?> 
     <div id="internal"> 
      <div id="sidebar"> 
       <h3>Navigation</h3> 
        <li><a href="index.php">Home</a></li> 
        <li><a href="about.php">About</a></li> 
        <li><a href="gallery.php">Gallery</a></li> 
        <li><a href="contact.php">Contact</a></li> 
      </div> <!-- end #sidebar --> 
      <div id="content"> 
       <p>Images Coming Soon!</p> 
       <p>Please see the about page for more information.</p> 
      </div> <!-- end #content --> 
     </div> <!-- end #internal --> 
     <?php include('includes/footer.php'); ?> 
    </div> <!-- end #wrapper --> 
</body>

CSS;

body { 
background-color: #f1f1f1; 
font-family: georgia,sans-serif; 
color: #333; 
margin: 0; 
padding: 0; 
} 

#wrapper { 
width: 960px; 
background-color: #f1f1f1; 
margin: 0 auto; 
border-left: 1px solid #ccc; 
border-right: 1px solid #ccc; 
} 

#internal 
{ 
width: 959px; 
height: auto; 
background-color: #f1f1f1; 
margin: 0 auto; 
border-right: 1px solid #ccc; 
} 

#content { 
width: 675px; 
height: auto; 
float: left; 
padding: 10px; 
} 

#sidebar { 
width: 150px; 
/* height: 410px; */ 
float: left; 
background-color: #27408B; 
color: white; 
} 

#sidebar a { 
text-decoration: none; 
color: white; 
} 

#sidebar li { 
list-style: none; 
}

내가 말했듯이; 멍청한 놈. 그래서 나는 아마도 여기에 바보 같은 일을하고있을 것입니다 ... jsfiddle을 사용해 보았습니다 만, 약 페이지의 내용을 많이 사용하더라도 크기가 작아서 사이드 바에 영향을주지 않습니다 ... I Chrome과 IE에서 테스트했는데 둘 다 똑같은 문제가 있습니다.

출처

2012-02-03 FizzBuzz

기존 코드로 쉽게 수정할 수 있습니다. 기본 방법은 다음과 같습니다. CSS Equal Height Columns.

기본적으로 사이드 바 색상을 래퍼 div에 추가하여 가짜로 만듭니다 (사용자의 경우 내부 # 내부를 사용할 수 있음). 이 div에는 실제로 주요 내용이 들어 있으므로 필요에 따라 확장됩니다. 사이드 바처럼 보이게하려면 메인 컨텐츠에 몸에 맞는 배경색을 지정하십시오. 실제 사이드 바 div에는 배경이 없으며 텍스트 만 보유하고 있습니다. 당신은 정말 이해하기위한 행동이 볼 필요가 있지만, 여기에 CSS 관련 비트입니다 수 있습니다

#internal { 
    background-color: #27408B; /* the color you want for the sidebar */ 
} 

#content { 
    background-color: #f1f1f1; /* matches the body background */ 
}

그리고 #sidebar에서 배경 컬러 라인을 제거합니다. (또한 #internal에 float을 추가하고 작업을 수행하기 위해 너비를 auto로 변경해야했습니다.)

Here it is in JSFiddle

출처

2012-02-03 00:36:31 ellawren

좋은 링크. 나는 또한 http://css-tricks.com/fluid-width-equal-height-columns/ –

하아, 그건 좋은 해결 방법이야, 나는 그런 식으로 생각하지 않았다! 감사합니다 :) – FizzBuzz

달성하려는 목표는 무엇입니까? 콘텐츠 영역의 텍스트와 동일한 높이를 갖는 파란색 사이드 바?
그렇다면 가장 쉬운 방법은 사이드 바 및 te 콘텐츠 div를 포함하는 div에 파란색 배경 이미지를 넣는 것입니다.

그렇게하려면, 당신은 < DIV 스타일을 넣어야 = "분명히 : 모두"> </DIV> 당신의 < DIV 클래스 = "내용"> ... </DIV>
이 방법, 당신의 ID 다음에 내부 div는 부동 어린이 요소의 높이와 함께 커질 것입니다.

#internal { 
background: url(blue.png) top left repeat-y; 
}

또 다른 jQuery를/CSS를 해킹을 사용하는 것입니다,하지만 난 그게 노력이 가치가 의심 :

<div class="sidebar">...< /div><br /> 
<div class="content">...< /div><br /> 
< div style="clear:both">...< /div><br />

은 그 후 당신은 반복 파란색 이미지를 추가 할 수 있습니다.

출처

2012-02-03 00:34:14 driedoezoe

CSS를 사용하여 DIV의 동적 크기 조정

답변

관련 문제