父 div 由于其子 div 而没有调整大小

Question

I am trying to load my HTML page into a container.我正在尝试将我的 HTML 页面加载到容器中。 However, when I try to load the HTML page, the container doesn't re-adjust its size to accommodate the Page.但是，当我尝试加载 HTML 页面时，容器不会重新调整其大小以适应页面。 The contents of my page are still visible but they look like they are overflowing without the background of the container.我的页面内容仍然可见，但在没有容器背景的情况下，它们看起来就像溢出了一样。 I am new to WebDev and have no idea about this.我是 WebDev 的新手，对此一无所知。

I have three containers.我有三个容器。 Container Big holds other two containers. Container Big 容纳另外两个容器。 ContainerMain holds navigation bar in it and I load page into containerPage whenever someone clicks the nav bar. ContainerMain 在其中包含导航栏，每当有人单击导航栏时，我都会将页面加载到 containerPage 中。 I want containerMain and ContainerPage to look like a scrollable continous box at the center of container Big with some top and bottom margins but, whenever I load the page into containerPage, it fails to resize itself for the page (in this case, homepage).我希望 containerMain 和 ContainerPage 看起来像一个可滚动的连续框，位于容器 Big 的中心，带有一些顶部和底部边距，但是，每当我将页面加载到 containerPage 中时，它都无法为页面调整自身大小（在本例中为主页）。

<div id="ContainerBig">
    <div id="ContainerMain"></div>
    <div id="containerPage"></div>
</div>

Here is css for my containers:这是我的容器的 css：

#ContainerBig {
    left: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

#ContainerMain {
    top:10%;
    left: 10%;
    right: 10%;
    width: 80%;
    height: 10%;
    max-height: 77px;
    border-radius: 5px;
    position: absolute;
    background-color: #262523;
    border: 1px solid #111;
}
#containerPage {
    top: min(20%,160px);
    left: 10%;
    right: 10%;
    width: 80%;
    height: auto;
    padding-bottom: 5%;
    margin-bottom: 10%;
    display: block;
    overflow: auto;
    position: absolute;
    background-color: #fff;
    border-radius: 0 0 5px 5px;
}

And I'm trying to load the following webpage:我正在尝试加载以下网页：

 // Just in case you need it, the code I'm using to load the page is: function changePage(page, context) { $(".navItem").removeClass("active"); $(context).addClass("active"); var contain = $("#containerPage"); contain.slideUp("10ms", "linear", function change() { contain.load(page); contain.slideDown("10ms"); }); if ($(window).width() < 1126) { var element = document.getElementById("nav"); element.style.display = "none"; } }

 body { font-family: HelveticaNeue, "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; color: #777; font-size: 13px; } #vertical_line { position: absolute; left: 69%; bottom: 12%; top: 12%; border-left: 1px solid #c1c1c1; }.pic_owner { top: 15%; left: 3%; width: 25%; height: auto; position: absolute; border: white 10px solid; border-radius: 10px; }.description_owner { display: block; position: absolute; top: 8%; left: 34%; width: 33%; line-height: 21px; } #more { display: block; font-weight: 400; } #heading { color: #333; font-family: HelveticaNeue, "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 40px; }.social { position: absolute; top: 8%; left: 72%; right: 6%; line-height: 21px; }.socialButton { -webkit-appearance: button; top: 10px; width: 90%; padding: 6%; position: relative; border: none; color: white; font-size: 16px; cursor: pointer; text-align: center; text-decoration: none; margin-bottom: 5px; }.fa:hover { -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; opacity: 0.9; }.fa-instagram { background: #E1306C; }.fa-linkedin { background: #007bb5; }.fa-facebook { background: #3B5998; }.fa-github { background: #141414; }

 <:DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello World</title> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="css/styleSheets/styleHomePage.css"/> <script type="text/javascript" src="jss/homepage.js"></script> </head> <body> <div id="content"> <img class="pic_owner" src="Resources/picture_aayush.jpg"> </img> <div class="description_owner"> <h1 id="heading">DEVELOPER</h1> <p><strong id="desc_detail">Loading.....</strong></p> <p id="more">Loading....</p> </div> <span id="vertical_line"></span> <div class="social"> <p id="addition"></p> <a href="" class="socialButton fa fa-github" type="button">&nbsp</a> <a href="" class="socialButton fa fa-linkedin" type="button">&nbsp Aayush Singla</a> <a href="h" class="socialButton fa fa-facebook" type="button">&nbsp </a> <a href="" class="socialButton fa fa-instagram" type="button"></a> </div> </div> </body> </html>

Please bare with me if this is a simple question.如果这是一个简单的问题，请告诉我。 I am stuck on this from kinda week now.从现在开始，我就被困在这个问题上了。

Answer 1

update:更新：

It looks to me like if you want both the header and the page content to scroll together, you need a container element with overflow: auto on it.在我看来，如果您希望 header 和页面内容一起滚动，您需要一个带有overflow: auto的容器元素。

<!-- HTML -->
<div id="ContainerBig">
  <div id="Container">
    <div id="ContainerMain"></div>
    <div id="containerPage"></div>
  </div>
</div>

//CSS
#ContainerBig {
    left: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

#Container {
  position: absolute;
  top:10%;
  left: 10%;
  right: 10%;
  width: 80%;
  height: 80%;
  overflow: auto;
}

#ContainerMain {
    height: 10%;
    max-height: 77px;
    border-radius: 5px;
    background-color: #262523;
    border: 1px solid #111;
}
#containerPage {
    height: auto;
    padding-bottom: 5%;
    margin-bottom: 10%;
    display: block;
    overflow: auto;
    background-color: #fff;
    border-radius: 0 0 5px 5px;
}

Here's a working pen: https://codepen.io/jacob_124/pen/ZEQoBxE?editors=1100这是一支工作笔： https://codepen.io/jacob_124/pen/ZEQoBxE?editors=1100

Note: It's a bad idea to rely on position absolute for layouts.注意：依赖 position absolute 进行布局是个坏主意。 Especially for when you don't have to.尤其是当你不需要的时候。 This layout could be easily accomplished with relative positioning.这种布局可以通过相对定位轻松完成。 Here's a pen with position relative: https://codepen.io/jacob_124/pen/BajxQbv这是一支与 position 相关的笔： https://codepen.io/jacob_124/pen/BajxQbv

父 div 由于其子 div 而没有调整大小

问题描述

1 个解决方案

解决方案1
1 2020-07-08 15:53:59

父 div 由于其子 div 而没有调整大小

问题描述

1 个解决方案

解决方案1 1 2020-07-08 15:53:59

解决方案1
1 2020-07-08 15:53:59