父项 DIV 未扩展以适应子项 div 内容的高度

Question

我的 CSS 有问题，其中父项 div (#cotentWrapper) 的高度没有扩展以适应子项 div (#bodyContent) 的高度一旦它的内容溢出。我们使用百分比表示身高。我们已经尝试了在此处找到的关于堆栈溢出的各种解决方案，但 none 解决了这个问题。我们尝试在#contentWrapper 上将高度设置为自动，这解决了我们上面指定的问题，它导致我们的导航栏消失，这也封装在#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%);
}

Answer 1

您的 post 缺少一点 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;*/

父项 DIV 未扩展以适应子项 div 内容的高度

Parent DIV not expanding to fit height of child div content

html

css

dom

web