그 내용으로 디브의 키를 크게 하다.
이 중첩 디브가 있는데 내부에 디브를 수용하기 위해 메인 컨테이너를 확장해야 합니다(높이).
<!-- head -->
...
<!-- /head -->
<body class="main">
<div id="container">
<div id="header">
<!--series of divs in here, graphic banner etc. -->
</div>
<div id="main_content"> <!-- this DIV _should_ stretch to accommodate inner divs -->
<div id="items_list" class="items_list ui-sortable">
<div id="item_35" class="item_details">
</div>
<div id="item_36" class="item_details">
</div>
<div id="item_37" class="item_details">
</div>
<!-- this list of DIVs "item_xx" goes on for a while
each one representing a photo with name, caption etcetc -->
</div>
</div>
<br class="clear"/>
<div id="footer">
</div>
</body>
</html>
CSS는 다음과 같습니다.
* {
padding: 0;
margin: 0;
}
.main {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #4c5462;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
.main #container {
height: auto;
width: 46em;
background: #4c5462;
margin: 0 auto;
border: 0px solid #000000;
text-align: left;
}
.main #main_content {
padding: 5px;
margin: 0px;
}
#items_list {
width: 400px;
float: left;
}
.items_list {
width: 400px;
float: left;
}
.item_details {
margin-top: 3px;
margin-bottom: 3px;
padding: 3px;
float: left;
border-bottom: 0.5px solid blue;
}
가 가진 는 입니다 는입니다.#main_content모든 내부 디브들을 수용하기 위해 기지개를 켜지 않고, 결과적으로 그들은 계속해서 배경과 어긋나게 됩니다.
위의 시나리오를 고려하면 어떻게 이 문제를 해결할 수 있습니까?
당신은 강제로 A를clear:both그#main_content디바가 문을 닫았습니다.아마 이사를 갈 겁니다<br class="clear" />;#main_contentCSS를 다음과 같이 설정합니다.
.clear { clear: both; }
업데이트: 이 질문은 여전히 꽤 많은 트래픽을 받기 때문에 CSS3에서 Flexible box 또는 Flexbox라는 새로운 레이아웃 모드를 사용하여 현대적인 대안으로 답을 업데이트하고 싶었습니다.
body {
margin: 0;
}
.flex-container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
background-color: #3F51B5;
color: #fff;
}
section.content {
flex: 1;
}
footer {
background-color: #FFC107;
color: #333;
}<div class="flex-container">
<header>
<h1>
Header
</h1>
</header>
<section class="content">
Content
</section>
<footer>
<h4>
Footer
</h4>
</footer>
</div>대부분의 최신 브라우저는 현재 Flexbox 및 Viewport 장치를 지원하지만 이전 브라우저에 대한 지원을 유지해야 하는 경우 특정 브라우저 버전에 대한 호환성을 확인해야 합니다.
시도해 보기:overflow: auto;
내 문제에 효과가 있었어요.
다음을 추가합니다.
overflow:hidden;
height:1%;
당신의 메인 디브에게.가이요음음erensa가이 필요 없음<br />이유로
대안적인 방법으로 당신은 또한 몇몇 상황에서 유용할 수 있는 이것을 시도할 수 있습니다.
display:table;
저는 그냥 사용할거에요.
height: auto;
당신의 디브에서.네, 제가 조금 늦었다는 건 알지만, 여기 있었다면 도움이 됐을 거라고 생각했어요.
아주 간단한 방법
상위 DIV에서:
height: 100%;
이 일은 언제나 나를 위한 일입니다.
다음이 작동해야 합니다.
.main #main_content {
padding: 5px;
margin: 0px;
overflow: auto;
width: 100%; //for some explorer browsers to trigger hasLayout
}
이 문제는 부모 분할의 자식 요소가 플로팅될 때 발생합니다.문제의 최신 해결 방법은 다음과 같습니다.
에 를 과 를 에 과 .clearfix 선택기와 와께사께g와사h:after
.clearfix:after {
content: "";
display: table;
clear: both;
}
다음 HTML 을 합니다 를 합니다..clearfix부모님 Div에게 수업을 듣습니다.예를 들어,
<div class="clearfix">
<div></div>
<div></div>
</div>
항상 효과가 있을 겁니다.클래스 이름을 .clearfix 대신 .group으로 부를 수 있습니다. 코드를 보다 의미 있게 만들 수 있기 때문입니다.큰따옴표 " 사이에 내용 값에 점이나 공백을 추가할 필요가 없습니다.또한 overflow: auto;는 문제를 해결할 수 있지만 스크롤 바 표시와 같은 다른 문제를 유발하므로 권장하지 않습니다.
출처 : Lisa Catalano and Chris Coyier 블로그
에는 를 합니다를 합니다.display:inline-block그것에 붙어있는 css.할 수 를 CSS할고한로럼할수만할다수이약면수다수할이u약uae,feasnntdnp .width아니면height내용물에 따라 확장되고 축소됩니다.
도움이 되길 바랍니다.
일반적으로 저는 이 문제가 해결될 수 있다고 생각합니다.clear:both의 마지막 자식에 대한 통치.#items_list.
다음 중 하나를 사용할 수 있습니다.
#items_list:last-child {clear: both;}
또는 동적 언어를 사용하는 경우 목록 자체를 생성하는 루프에서 생성된 마지막 요소에 클래스를 추가하면 HTML에 다음과 같은 내용이 추가됩니다.
<div id="list_item_20" class="last_list_item">
그리고 CSS
.last_list_item {clear: both; }
작업을 수행하기 전에 다음을 사용하여 CSS 규칙을 확인합니다.
{ position:absolute }
필요 없는 경우 제거합니다.
이게 되는 것 같네요.
html {
width:100%;
height:auto;
min-height:100%
}
화면 크기를 최소화하고, 콘텐츠를 확장하면 커집니다.
플로트 속성을 에 추가합니다.#main_contentdiv - 그 다음에 떠 있는 내용을 포함하도록 확장됩니다.
전통적인 방법을 시도해보셨나요? 주 컨테이너 높이: auto
#container{height:auto}
저는 이것을 사용해 보았는데 대부분의 시간을 저와 함께 했습니다.
부유된 요소는 이름에서 알 수 있듯이 부모 요소 내부의 공간을 차지하지 않습니다.따라서 하위 요소가 플로팅된 요소에 높이가 명시적으로 제공되지 않으면 상위 요소가 축소되고 하위 요소의 치수를 수용하지 않는 것처럼 보입니다.overflow:hidden;아이들이 화면에 나타나지 않을 수 있습니다.이 문제에는 여러 가지 방법이 있습니다.
플로팅된 요소 아래에 다른 요소를 삽입합니다.
clear:both;재산, 또는 용도clear:both;위에:after떠다니는 원소의사용하다
display:inline-block;아니면flex-box대신에float.
난 시도했다.height: fit-content그리고 그것은 나에게 효과가 있었습니다.
CSS에서:#clear_div{clear:both;}
내부 디바의 div 태그 후에 이 새로운 다음 div를 추가합니다.
<div id="clear_div"></div>
http://www.w3schools.com/cssref/pr_class_clear.asp : 자세한 내용은
부트스트랩을 프로젝트에 추가했습니다.section화면 높이의 100%로 설정한 태그.제가 프로젝트를 반응하게 만들 때까지 잘 작동했고, 그 시점에서 제니포페니의 답변 일부를 빌려서 화면 크기가 더 작은 화면에서 바뀔 때 제 섹션 배경이 콘텐츠 배경과 일치했습니다.
나의 새로운sectionCSS는 다음과 같습니다.
section {
// min-height so it looks good on big screen
// but resizes on a small-screen
min-height: 100%;
min-height: 100vh;
width:100%;
width:100vh;
}
특정한 색상의 섹션이 있다고 가정해 보겠습니다.사용함으로써min-height, 화면이 작아져 섹션의 너비가 줄어들면 섹션의 높이가 확장되고 내용이 섹션 내에 유지되며 배경이 원하는 색으로 유지됩니다.
위에 나열된 거의 모든 제안을 시도했지만 아무 것도 효과가 없었습니다.하지만 저는 "디스플레이: 테이블"이 효과가 있었습니다.
제가 직접 프로젝트를 진행하고 있는데요. 디브 안에 테이블이 있었는데 그 테이블은 디브 바닥에서 쏟아져 나왔어요.제가 시도한 높이 고정 장치는 아무 것도 효과가 없었지만, 이상한 고정 장치를 발견했습니다. 그것은 디브의 하단에 마침표가 있는 단락을 넣는 것입니다.그런 다음 텍스트의 "색"을 컨테이너의 배경과 동일하게 입력합니다.원하는 대로 깔끔하게 작업했고 자바스크립트가 필요 없습니다.깨지지 않는 공간은 작동하지 않으며 투명한 이미지도 작동하지 않습니다.
분명히 테이블 아래에 내용물이 있는지 확인해야 그 내용을 담을 수 있었다고 합니다.이것이 다른 사람에게도 효과가 있을지 궁금합니다.
이것은 디자이너들이 테이블 기반 레이아웃에 의존하게 만드는 것입니다. 이것을 파악하고 상호 브라우저 호환성을 갖추는데 들인 시간이 너무 많아서 미칠 것 같습니다.
이걸 해봤는데 효과가 있었어요.
<div style=" position: absolute; direction: ltr;height:auto; min-height:100%"> </div>
UI를 . 은 jQuery UI를 . 작품들은 그저 매력을 더해줍니다.<div>확장하고 싶은 디브 안쪽 하단에height:auto;그런 다음 클래스 이름 ui-timeout-clearfix를 추가하거나 이 스타일 특성을 사용하여 아래와 같이 추가합니다.
<div style=" clear:both; overflow:hidden; height:1%; "></div>
확장할 div가 아닌 clear div에 jQuery UI 클래스를 추가합니다.
이것이 일종의 오래된 실이라는 것을 알고 있지만, 이것은 다음과 같이 달성될 수 있습니다.min-heightCSS 속성을 깨끗하게 처리할 수 있으므로 이 내용은 나중에 참고할 수 있도록 여기에 남겨 두겠습니다.
여기에 게시된 OP 코드를 기반으로 피들을 만들었습니다. http://jsfiddle.net/U5x4T/1/, 내부에서 디브를 제거하고 추가하면 용기가 어떻게 팽창하거나 크기가 줄어드는지 알 수 있습니다.
이를 달성하기 위해 OP 코드에 추가로 필요한 두 가지 사항은 다음과 같습니다.
*주컨테이너의 오버플로우(floating div에 필요)
*min-height css 속성, 자세한 정보는 여기서 확인 가능: http://www.w3schools.com/cssref/pr_dim_min-height.asp
디스플레이 추가: div에 인라인으로 설정된 div 높이 200px보다 높이 내용이 커지면 자동(스크롤이 아닌)으로 커짐
CSS 그리드 레이아웃을 사용할 수 있습니다.현재 지원 범위가 다소 넓습니다. 캐니유즈에서 확인해보세요.
jsfiddle의 예는 다음과 같습니다.또한 수많은 텍스트와 관련된 예입니다.
HTML 코드:
<div class="container">
<div class="header">
Header
</div>
<div class="content">
Content
</div>
<div class="footer">
Footer
</div>
</div>
CSS 코드:
html, body {
width: 100%;
height: 100%;
margin: 0;
}
.container {
width: 100%;
height: 100%;
display: grid;
grid-template-rows: 100px auto 150px;
grid-template-columns: auto;
}
// style stuff
저도 같은 문제에 직면했습니다.다른 방법으로 풀었습니다.
~하듯이<div id="container">입니다의 입니다.<div id="main_content">(자녀 div/s가 추가됨에 따라 확장할 수 있음).
css of .main #container당신은 이 div할 수 . 의 와 를 할 할 .그래서 아이들 디브/s가 안에 추가되면서<div id="main_content">의 입니다.<div id="container">,<div id="main_content">스크롤 바를 추가하지 않고도 어린이 콘텐츠에 따라 높이와 너비가 자동으로 증가합니다.
도움이 되길 바랍니다.
감사해요.
CSS를 많이 사용할 필요 없이 부트스트랩만 사용하고 다음을 사용합니다.
class="container"
채워야 할 디브를 위해서 말입니다.
언급URL : https://stackoverflow.com/questions/1709442/make-divs-height-expand-with-its-content
'programing' 카테고리의 다른 글
| ASP를 사용하여 여러 응용프로그램에 걸쳐 세션을 공유합니다.NET Session State Service (0) | 2023.09.07 |
|---|---|
| MySQL 메모리 테이블과 동등한 PostgreSQL? (0) | 2023.09.07 |
| Eclipselink: 임시 테이블의 열 길이 및 mb4 (0) | 2023.09.07 |
| 클라이언트 브라우저에 알림 푸시 (0) | 2023.09.07 |
| sqalchemy 엔진이 제공된 IP 대신 127.0.0.1에 연결하려고 합니다. (0) | 2023.09.07 |