기본 DIV 높이가 내용으로 조정되지 않습니다.

-2

기본 div (빨간색 테두리가있는 DIV)에 문제가 있습니다. 내용의 크기는 조정되지 않습니다. 이미 시도한 내용은 다음과 같습니다.기본 DIV 높이가 내용으로 조정되지 않습니다.

div{ 
min-height:1%; 
overflow:hidden; 
}

그러나이 경우에는 작동하지 않습니다. 나는 심지어 외부 DIV뿐만 아니라 내부 요소에도 이것을 사용했습니다.

이 내부 DIV 여러 스팬을 추가

<div id="spanOfferHeaderData" style="display:block;min-height:1%;overflow:hidden;min-width:1%;">     
    <span><strong>PONUDBA ŠT.: 000017-2017</strong><span><br> 
    <span>Datum: 05.09.2017<span><br> 
    <span>Datum veljavnosti: 07.09.2017</span><br> 
    <span>Kraj izdaje: Ljubljana</span><br/> 
    <span>Dogodek: Test dogodek</span><br> 
    <span>Lokacija: Celje - Maribor</span><br> 
    <span>Opis: Opis opis opis opis<span><br> 
    <span>drugi Opis: Opis opis opis opis<span><br> 
</div>

만이 스팬 (주 DIV 콘텐츠와 크기를 조정하지 않기 때문에) 눈에 보이는, 다른 스팬이 표시되지 않습니다 있습니다. 콘텐츠로 메인 DIV의 크기를 조정하려면 어떻게해야합니까?

나는 전체 예제 DIV의 포장 당신의 스팬의 here

출처

2017-09-07 FrenkyB

크기를 변경하면 세로로 확장됩니까? 그렇다면 당신이 제공 한 예가 나를 위해 일하고 있습니다. –

높이가 조정되지 않는다고 썼습니다. 예, 수직. 어떤 브라우저를 사용하고 있습니까? – FrenkyB

인라인 스타일 만 사용하면 이해하기가 매우 어렵습니다.- –

에 1 점을 추가하는 듯 한 것은 다음과 같은 CSS 속성했습니다

position: absolute; 
top: 180px;

위치 절대 문서 흐름과 상단에서 제거에 의해 아래로 밀고있다 180 픽셀. 그런 다음이 : 컨테이너에서 확장 컨테이너 내의 모든 요소를 의미하는 용기 부모 중 하나에

overflow: hidden;

가보기에서 숨겨진 넘치는 내용이있다.

내가 당신 CodePen 갈래 내가 당신이 원하는 생각하는 결과를 얻기 위해 이러한 속성을 제거했습니다 당신이 말했듯이 나는 절대 위치를 제거했습니다 https://codepen.io/anon/pen/MvdRqB?editors=1010

콘텐츠에 따라 크기를 조정하려면 컨테이너를 원하지만 이전에 말한 것처럼 문서 흐름에서 제거되었으므로 절대적으로 배치 된 요소는 내용으로 계산하지 않습니다.

필자는 인라인 스타일을 사용하지 말 것을 강력히 권장하며, 채워지지 않은 일종의 테이블 구조를 사용하고 있으며, 모든 구조가 엉망이고 혼란 스럽기 때문에 구조에주의를 기울여야합니다.

출처

2017-09-07 10:12:07

상단을 사용하는 것도 문제입니다. 외부 요소의 크기가 조정되지만 내부 요소의 높이만 내부 요소의 top 속성이 아니라 https://codepen.io/FrenkyB/pen/OjYYNO입니다. 외부 DIV는 크기가 조정되지만 최상위 속성이 고려되지 않기 때문에 내부 DIV가 보이지 않게됩니다. – FrenkyB

기본 DIV 높이가 내용으로 조정되지 않습니다.

답변

관련 문제