내용으로 div의 높이를 확장하십시오.

Programing

내용으로 div의 높이를 확장하십시오.

lottogame 2020. 2. 29. 13:35

내용으로 div의 높이를 확장하십시오.

중첩 된 div가 있고 내부의 DIV를 수용하기 위해 (높이) 확장 할 기본 컨테이너가 필요합니다.

    <!-- 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 accomodate 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모든 내부 div를 수용하기 위해 늘어나지 않고 결과가 배경에 계속해서 도달한다는 것입니다.

이 문제를 어떻게 해결할 수 있습니까?

div를 닫기 clear:both전에 a를 강제해야합니다 #main_content. 아마도 div <br class="clear" />;로 옮기고 #main_contentCSS를 다음과 같이 설정합니다.

.clear { clear: both; }

업데이트 : 이 질문에는 여전히 많은 양의 트래픽이 발생하므로 CSS3에서 Flexible boxes 또는 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 및 뷰포트 단위를 지원 하지만 이전 브라우저에 대한 지원을 유지해야하는 경우 특정 브라우저 버전의 호환성을 확인하십시오.

이 시도: overflow: auto;

내 문제에 효과적이었다 ..

다음을 추가하십시오.

overflow:hidden;
height:1%;

당신의 주요 사업부에. <br />클리어를위한 여분의 필요성을 제거합니다 .

대안적인 방법으로 일부 상황에서 유용 할 수있는 이것을 시도 할 수도 있습니다.

display:table;

jsFiddle

난 그냥 사용할거야

height: auto;

귀하의 사업부. 예, 조금 늦었다는 것을 알고 있지만 이것이 있다면 누군가 도움이 될 것이라고 생각했습니다.

다음과 같이 작동합니다.

.main #main_content {
    padding: 5px;
    margin: 0px;
    overflow: auto;
    width: 100%; //for some explorer browsers to trigger hasLayout
}

display:inline-blockCSS가 연결된 span 태그를 사용하십시오 . 당신이 포함되지 않는 경우는 다음 CSS를 사용하고 많은 방법으로 사업부처럼 조작 할 수 있지만, 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; }

이 문제는 Parent Div의 자식 요소가 플로팅 될 때 발생합니다. 문제 의 최신 해결책 은 다음과 같습니다 .

CSS 파일 에서 의사 선택기와 함께 .clearfix 라는 다음 클래스를 작성하십시오 .

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

그런 다음 HTML에서 .clearfix 클래스를 부모 Div에 추가하십시오 . 예를 들면 다음과 같습니다.

<div class="clearfix">
    <div></div>
    <div></div>
</div>

항상 작동해야합니다. 클래스 이름을 .clearfix 대신 .group 으로 호출 하면 코드의 의미가 향상됩니다. 큰 따옴표 ""사이 에 Content 값에 점 또는 공백을 추가 할 필요는 없습니다 . 또한 오버플로 : auto; 문제를 해결할 수 있지만 스크롤 막대 표시와 같은 다른 문제가 발생하므로 권장하지 않습니다.

출처 : Lisa Catalano와 Chris Coyier의 블로그

#main_contentdiv에 float 속성을 추가하면 float 된 내용을 포함하도록 확장됩니다.

무엇이든하기 전에 CSS 규칙을 확인하십시오.

{ position:absolute }

존재하는 경우 제거하고 필요하지 않습니다.

부동 요소는 부모 요소 내부의 공간을 차지하지 않습니다. 따라서 자식 요소가 플로팅 된 요소에 높이가 명시 적으로 제공되지 않으면 부모 요소가 축소되어 자식 요소의 치수를 허용하지 않는 것처럼 보입니다. 자식 요소가 지정된 overflow:hidden;자식이 화면에 나타나지 않을 수도 있습니다. 이 문제를 처리하는 방법에는 여러 가지가 있습니다.

으로 부유 요소 아래에 다른 요소를 삽입 clear:both;속성 또는 사용 clear:both;에 :after떠내려 요소.
사용 display:inline-block;또는 flex-box대신 float.

이 작동하는 것 같습니다

html {
 width:100%;
 height:auto;
 min-height:100%
}

화면 크기가 최소가되고 컨텐츠가 확장되면 커집니다.

아주 간단한 방법

부모 DIV에서 :

height: 100%;

매번 나를 위해 일하는

CSS에서 : #clear_div{clear:both;}

내부 div의 div 태그 뒤에이 새로운 div를 추가하십시오.

<div id="clear_div"></div>

http://www.w3schools.com/cssref/pr_class_clear.asp : 자세한 내용은

section화면 높이의 100 %로 설정 한 태그가 있는 프로젝트에 Bootstrap을 추가했습니다 . 프로젝트를 반응 형으로 만들 때까지 잘 작동했습니다.이 시점에서 jennyfofenny 의 답변 중 일부를 빌려서 화면 크기가 작은 화면에서 변경되었을 때 섹션 배경이 내용의 배경과 일치했습니다.

내 새 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하면 더 작은 화면으로 인해 섹션의 너비가 줄어들면 섹션의 높이가 확장되고 내용이 섹션 내에 유지되며 배경이 원하는 색상으로 유지됩니다.

전통적인 방법을 사용해 보셨습니까? 주요 컨테이너 높이를 제공하십시오 : 자동

#container{height:auto}

나는 이것을 사용했고 그것은 대부분 나와 함께 일했다.

나는 프로젝트에서 이것을 직접 실행하고있다-div의 바닥에서 쏟아져 나온 div 안에 테이블이 있었다. 내가 시도한 높이 수정은 없었지만 이상한 수정을 찾았습니다. 마침표로 마침표를 div의 맨 아래에 배치하는 것입니다. 그런 다음 텍스트의 "색"을 컨테이너의 배경과 동일하게 스타일을 지정하십시오. 당신이 원하는대로 깔끔하게 작동하고 자바 스크립트가 필요하지 않습니다. 끊김없는 공간은 작동하지 않으며 투명한 이미지도 작동하지 않습니다.

분명히 그것을 포함하기 위해 확장하기 위해 테이블 아래에 일부 내용이 있음을 알 필요가있었습니다. 이것이 다른 사람에게 효과가 있는지 궁금합니다.

이것은 디자이너가 테이블 기반 레이아웃에 의존하게 만드는 일종의 것입니다.이 물건을 알아 내고 브라우저 간 호환 가능하게 만드는 데 걸린 시간은 나를 미치게합니다.

나는 이것을 시도하고 효과가 있었다

<div style=" position: absolute; direction: ltr;height:auto; min-height:100%">   </div>

jQuery UI를 사용하는 경우 이미 확장 된 클래스의 <div>하단에 div height:auto;를 추가 한 다음 클래스 이름 ui-helper-clearfix를 추가 하거나이 스타일 속성을 사용하여 다음과 같이 추가하십시오. :

<div style=" clear:both; overflow:hidden; height:1%; "></div>

확장하려는 div가 아닌 명확한 div에 jQuery UI 클래스를 추가하십시오.

나는 이것이 일종의 오래된 스레드라는 것을 알고 있지만 이것은 min-heightCSS 속성을 사용하여 깔끔하게 얻을 수 있으므로 나중에 참조 할 수 있도록 여기에 남겨 둘 것입니다.

여기에 OP 게시 코드를 기반으로 바이올린을 만들었습니다 .http : //jsfiddle.net/U5x4T/1/ , 내부에 div를 제거하고 추가하면 컨테이너가 어떻게 확장되거나 축소되는지 알 수 있습니다.

OP 코드에 추가하여이 작업을 수행하는 데 필요한 유일한 것은 다음과 같습니다.

* 메인 컨테이너의 오버플로 (플로팅 div에 필요)

* min-height CSS 속성, 자세한 정보는 여기 ( http://www.w3schools.com/cssref/pr_dim_min-height.asp)를 참조 하십시오.

div에 display : inline을 추가하고 높이 내용이 200px의 설정된 div 높이보다 커지면 자동으로 커집니다 (스크롤 항목이 아님).

CSS Grid Layout을 사용할 수 있습니다 . 현재 지원 범위가 넓습니다 . caniuse에서 확인하십시오 .

다음은 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

많은 CSS를 사용할 필요가 없으며 부트 스트랩을 사용하고 다음을 사용하십시오.

class="container"

div를 채워야합니다.

여기에서 부트 스트랩을 얻을 수 있습니다

참고 URL : https://stackoverflow.com/questions/1709442/make-divs-height-expand-with-its-content

'Programing' 카테고리의 다른 글

CMake 출력을 지우는 'cmake clean'명령 찾기 (0)	2020.02.29
예외를 일으킨 예외 설명 및 스택 추적을 모두 문자열로 가져옵니다. (0)	2020.02.29
'모듈 가져 오기'또는 '모듈 가져 오기에서'를 사용 하시겠습니까? (0)	2020.02.29
R에 어떤 패키지 버전이로드되어 있는지 확인하는 방법 (0)	2020.02.29
파일 변환 : Android에서 Uri를 파일로 (0)	2020.02.29

현재글내용으로 div의 높이를 확장하십시오.

복권의 역사, 로또 정보와 IT 기술 등을 다루는 블로그입니다.

JQuery, 행사, 자바, java, Spring3, 연극, 여행, spring, 극장순위, c++, Javascript, 볼거리, 가족나들이, 공연, 놀거리, 무비순위, 뮤지컬, 축제, c#, 관광,

Today :
Yesterday :

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

lottogame

내용으로 div의 높이를 확장하십시오.

내용으로 div의 높이를 확장하십시오.

아주 간단한 방법

'Programing' 카테고리의 다른 글

'Programing'의 다른글

티스토리툴바

내용으로 div의 높이를 확장하십시오.

내용으로 div의 높이를 확장하십시오.

아주 간단한 방법

'Programing' 카테고리의 다른 글

'Programing'의 다른글

관련글

티스토리툴바