상위 DIV가 하위 div 콘텐츠의 높이에 맞게 확장되지 않음

debugcn 에 게시 Dev

user2488275

콘텐츠가 오버플로되면 부모 div (#cotentWrapper)의 높이가 자식 div (#bodyContent)의 높이에 맞게 확장되지 않는 CSS에 문제가 있습니다. 우리는 신장에 백분율을 사용하고 있습니다. 우리는 스택 오버플로에서 여기에서 찾은 다양한 솔루션을 시도했지만 아무도이 문제를 해결하지 못했습니다. 위에서 지정한 문제를 해결 한 #contentWrapper에서 높이를 auto로 설정하려고 시도했습니다. 이로 인해 탐색 바가 사라지고 #contentWrapper div에 캡슐화되어 있습니다. 작동해야하는 모든 DIV에 최소 높이를 설정했습니다.

여기에 이미지 설명 입력

HTML :

 <!DOCTYPE html>

<html lang="en">
<head>
    <title>  </title>
    <meta charset="utf-8" />

    <link href="~/Content/bootstrap.min.css" rel="stylesheet" /> 
    <link href="~/Content/AccountDetailsStyles.css" rel="stylesheet" />
    <link href="~/Content/Site1.css" rel="stylesheet" />
    <script src="~/Scripts/jquery.min.js"></script>
    <script src="~/Scripts/jquery-ui.min.js"></script>

</head>

<body>

    <div id="contentWrapper">

        <div id="header">
            <div id="logoWrapper">
                <div id="logoImg"></div>
            </div>
        </div>

        <div id="contentBoxShadow">
            <div id="navigation">

            </div>

            <div id="bodyContent">
                @RenderBody()
                Lorem ipsum dolor sit amet, vidisse corrumpit mel ea, te purto oportere assueverit nam. Ut pro mazim utinam gloriatur, eum tempor eruditi eu, iudico laboramus nec ei. Ancillae offendit officiis vim ea. Cu fabellas sapientem maiestatis his, at consequat deseruisse sea. Illum singulis suavitate mea no, vivendum tincidunt eloquentiam ius an. His no etiam copiosae, quo an delicata volutpat petentium.

                An esse ridens ullamcorper ius, an est scaevola voluptatibus. Est ne iusto oratio. Laboramus deseruisse nec te, laoreet accumsan ut pri. Qui eu lorem repudiare, utroque epicuri ius ne. Ipsum adversarium definitionem eu vis, an vim paulo discere atomorum.

                Cu case bonorum vix, te sit habeo audiam electram. Ad cum graeco sadipscing, justo mandamus pertinacia mel id, ei eam soluta melius inimicus. Ad vel propriae aliquando, graeci aliquam petentium ea his. Mel ut maiorum albucius reprehendunt. Sed referrentur neglegentur te, usu ea quot aliquando, eu mei recusabo constituam vituperatoribus. Oratio volutpat tincidunt per et, at vitae facete virtute vis.

                Ut quis solum qui, essent utamur eloquentiam no sea. Est eros suscipit deseruisse ex. Sit illud tractatos consectetuer te. Ad mutat noluisse eum. At sit volumus tincidunt.

                Prompta alterum adolescens ei his. Ex inani quidam docendi nam, ea natum veritus vel, homero vulputate intellegat et duo. Tempor volumus mel id, ad probo viderer invenire mel. Civibus lucilius in per. An ignota nominavi praesent usu. Sed quando indoctum conclusionemque ad, vim amet petentium cu, summo eruditi ne vix. Habemus maluisset reprimique ad nam, vero laudem ad quo.
            </div>
        </div>

    </div>

</body>

CSS : * {패딩 : 0; 여백 : 0; }

html, body {
    width: 100%;
    height:100%;
    min-height: 100%;
    position: relative;
}

body
{
    background-image: url("Images/textured_background.png");
    background-repeat: repeat;
    background-attachment: fixed;
}

#contentWrapper
{
    width: 88%;
    height: 100%;
    //height: auto;
    min-height: 100%;
    margin: 0 auto;
}

#contentBoxShadow
{
    width: 100%;
    min-height: 85%;
    height: 85%;
    background-color: #EFEFEF;
    background-color: pink;
    position: relative;
}

#bodyContent
{
    width: 90%;
    height: 93%;
    height: auto;
    min-height: 93%;
    padding-left: 30px;
    padding-right: 30px;
    background-color: white;
    margin: 0 auto;
}

#header
{
    height: 15%;
    width: 100%;
}

#logoWrapper
{
    padding-top: 1.5%;
    padding-bottom: 1.5%;
    height: 97%;
    width: 100%;
}

#logoImg
{
    background-image:url("Images/logo.png");
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    width: auto;
}

#contentBoxShadow:before {
    box-shadow: -15px 0 15px -15px inset;
    content: "";
    height: 100%;
    left: -15px;
    position: absolute;
    top: 0;
    width: 15px;
}

#contentBoxShadow:after {
    box-shadow: 15px 0 15px -15px inset;
    content: "";
    height: 100%;
    position: absolute;
    right: -15px;
    width: 15px;
    top: 0;
}

#navigation 
{
    height: 7%;
    width: 100%;
    background-image: -ms-linear-gradient(top, #004A94 0%, #003366 100%);
    background-image: -moz-linear-gradient(top, #004A94 0%, #003366 100%);
    background-image: -o-linear-gradient(top, #004A94 0%, #003366 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #004A94), color-stop(1, #003366));
    background-image: -webkit-linear-gradient(top, #004A94 0%, #003366 100%);
    background-image: linear-gradient(to bottom, #004A94 0%, #003366 100%);
}

홍옥

귀하의 게시물에 약간의 HTML이 부족하지만 질문을 올바르게 이해했다면 #contentBoxShadow에서 높이와 최소 높이를 제거하면 문제가 해결됩니다. #contentWrapper에서 높이와 최소 높이를 제거해야 할 수도 있지만 HTML의 해당 부분이 누락되었습니다.

#contentBoxShadow
{
  width: 100%;
  background-color: #EFEFEF;
  background-color: pink;
  position: relative;
}

http://jsfiddle.net/32x50fdv/

편집 : 또한 CSS에서 이중 슬래시를 사용하여 줄을 주석 처리하려고했지만 CSS에서는 작동하지 않습니다. 대신 / ** /를 사용해야합니다.

//height: auto;

해야한다

/*height: auto;*/

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-2

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

상위 DIV가 하위 div 콘텐츠의 높이에 맞게 확장되지 않음

상위 DIV가 하위 div 콘텐츠의 높이에 맞게 확장되지 않음

'공백 : nowrap'이있는 요소의 너비가 하위 콘텐츠에 맞게 조정되지 않음

div 위치 내부의 div는 절대 상위 div 높이입니다. 하위 div 높이가 증가하면 확장되지 않습니다.

이미지 위의 HTML 콘텐츠 DIV 프레임이 작동하지 않음

상위 Div가 하위 Div로 확장되지 않음

플렉스 박스 콘텐츠에 맞게 너비가 확장되지 않는 절대 위치 컨테이너

콘텐츠 div의 높이가 다이빙 내부 콘텐츠와 함께 증가하지 않음

콘텐츠의 상대 위치에 맞게 div 높이 또는 위치를 조정하려면 어떻게해야합니까?

콘텐츠에 맞게 크기가 조정되지 않는 상대 위치 콘텐츠 래퍼

동일한 위치에있는 두 개의 DIV-추가 콘텐츠와 겹치지 않음

내 콘텐츠의 높이가 100 %가되지 않는 CSS Div

절대 div 태그 높이가 상위 div에 정렬되지 않음

CSS 확대시 하위 div 너비에 맞게 상위 div 확장

페이지 위치를 변경하지 않고 div의 높이를 변경할 때 항상 콘텐츠를 아래로 밀어냅니다.

div의 테두리가 100 % 높이로 상위 div의 상단에 도달하지 않습니다.

콘텐츠를 표시하기 위해 컨테이너 div가 확장되지 않는 이유는 무엇입니까?

div 콘텐츠 변경 후 jQuery가 응답하지 않음-위임 된 이벤트 처리기

상위 div 내의 콘텐츠가 너비를 넘어 확장 됨

이미지 주위에 div를 단단히 감싸고 해상도가 콘텐츠 영역보다 큰 경우 콘텐츠 영역에 맞게 이미지 크기를 조정하는 방법은 무엇입니까?

CSS 뷰포트 높이 : 100vh가 div의 콘텐츠에서 올바르게 작동하지 않습니다.

콘텐츠에 맞게 div 너비를 만들고 나머지를 채우기 위해 다음 div를 만드는 방법은 무엇입니까?

div의 높이를 자동으로 설정하면 콘텐츠가 조정되지 않습니다.

HTML DIV가 보이지 않을 때 콘텐츠를 위에 표시하지 않고 다른 콘텐츠를 가리지 않는 이유는 무엇입니까?

'탭의 콘텐츠 div'가 표시되지 않습니다.이 작업을 수행하기 위해 AngularJS를 사용하고 있습니다.

다음 div의 콘텐츠가 첫 번째 div의 위치로 이동하지 않도록 div 내부에 2 개의 스팬을 한 줄로 만드는 방법은 무엇입니까?

부트 스트랩 4 : 상위 div 내부에 이미지 콘텐츠 맞추기

콘텐츠가 한 줄에 맞지 않을 때 컨테이너 div를 명확하게 만드시겠습니까?

Flexbox 부모 컨테이너가 자식과 함께 성장하지 않습니까? 내부 콘텐츠가 상위 div 밖으로 넘쳐납니다.

해상도에 맞게 조정하는 div의 높이

마스터 페이지 콘텐츠가 하위에 표시되지 않음