Родитель DIV не расширяется, чтобы соответствовать высоте содержимого дочернего div

У меня проблема с моим CSS, где высота родительского div (#cotentWrapper) не расширяется, чтобы соответствовать высоте дочернего div (#bodyContent) после его содержимого переполняется. Мы используем проценты для наших высот. Мы попробовали различные решения, найденные здесь при переполнении стека, но ни одна проблема не разрешила эту проблему. Мы попытались установить высоту на auto на #contentWrapper, который решил нашу проблему, указанную выше, что наш навигационный бар исчез, который также инкапсулирован в div #contentWrapper. Мы установили минимальные высоты для всех DIV, которые должны работать.Родитель DIV не расширяется, чтобы соответствовать высоте содержимого дочернего div

enter image description here

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; margin: 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%); 
}

источник

2015-02-22 user2488275

Ваш пост не хватает немного в HTML, но если я правильно понял вопрос, извлекая высоту и мин-высота на #contentBoxShadow в Решает проблему. Возможно, вам придется удалить высоту и min-height из #contentWrapper, но эта часть HTML отсутствует.

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

http://jsfiddle.net/32x50fdv/

Edit: также отметить, что в вашем CSS вы попытались закомментировать строку, используя двойную косую черту, которая в CSS не будет работать. Вы должны использовать/**/вместо:

//height: auto;

должен быть

/*height: auto;*/

источник

2015-02-22 01:47:09 Jonathan

Я попробовал ваше решение. Это также удаляет навигационную панель, так как она и #bodyContent используют проценты, чтобы она соответствовала всей странице. Удаление высоты из #contentBoxShadow означает, что браузер не знает, как рассчитать высоту обоих этих дочерних элементов, например 93 %%? – user2488275

Можете ли вы опубликовать полный HTML-код? – Jonathan

Можно ли прокручивать содержимое в #bodyContent следующим образом: http://jsfiddle.net/32x50fdv/1/? – Jonathan

Родитель DIV не расширяется, чтобы соответствовать высоте содержимого дочернего div

ответ

Смежные вопросы