html - 页面不会溢出

Question

好吧，这是一个非常愚蠢的问题，但我无法让它工作。我希望页面的一部分为 20%，另一侧为 100%，总宽度为 120%。现在，我正在做所有这些来试验 jQuery 和导航栏，但我终生无法让这些 div 溢出，以便在底部有一个滚动条。所发生的只是 100% 的 div 低于 20% div。我试过花车，但它们不起作用，我也不知道为什么。感谢您的帮助

代码

body, html {
  margin: 0px;
  height: 100%;
  overflow: auto;
}

#allContainer {
  height: 100%;
  float: left;
  box-sizing: border-box;
}

#navbarDiv {
  height: 100%;
  width: 20%;
  background-color: red;
  position: relative;
  z-index: 50;
  float: left;
  box-sizing: border-box;
  padding: 0;
}

#mainPageDiv {
  width: 100%;
  height: 100%;
  position: relative;
  box-sizing: border-box;
  background-color: blue;
  float: left;
}

p {
  padding: 0px;
  margin: 0px;
}

<div id="allContainer">
			<div id="navbarDiv">
				<p>
					LLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a mauris et nulla facilisis eleifend. Sed metus orci, vulputate sit amet malesuada id, luctus vestibulum lacus. Sed faucibus, nibh vel faucibus porta, lectus lacus suscipit metus, ut posuere nulla dolor porttitor erat. Nam iaculis dolor et est tristique scelerisque. Integer gravida scelerisque est, ut pellentesque sem facilisis in. Quisque felis elit, laoreet id sagittis non, sollicitudin vitae turpis. Pellentesque quis quam sed nibh sollicitudin porttitor non ac sapien. Cras luctus egestas urna, vitae bibendum enim malesuada ut. Nulla porta tempus mi vel consequat. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros.
				</p>
			</div>
			<div id="mainPageDiv">
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a mauris et nulla facilisis eleifend. Sed metus orci, vulputate sit amet malesuada id, luctus vestibulum lacus. Sed faucibus, nibh vel faucibus porta, lectus lacus suscipit metus, ut posuere nulla dolor porttitor erat. Nam iaculis dolor et est tristique scelerisque. Integer gravida scelerisque est, ut pellentesque sem facilisis in. Quisque felis elit, laoreet id sagittis non, sollicitudin vitae turpis. Pellentesque quis quam sed nibh sollicitudin porttitor non ac sapien. Cras luctus egestas urna, vitae bibendum enim malesuada ut. Nulla porta tempus mi vel consequat. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros.
				</p>
			</div>
		</div>

Answer 1

block 元素的自然行为(<div> 和 <p> 标签的默认显示属性是在没有足够空间的情况下显示在先前内容的下方。因此，您所要做的就是放置 block 放入宽度为 120% 的容器中。

fiddle :Here

CSS

#allContainer {
    background: green;
    height: 100%;
    box-sizing: border-box;
    position: relative;
}
#navbarDiv {
    height: 100%;
    width: 16.666666%;
    background-color: red;
    position: relative;
    z-index: 50;
    float: left;
    box-sizing: border-box;
    padding: 0;
    display: none;
}
#mainPageDiv {
    width: 100%;
    height: 100%;
    position: relative;
    box-sizing: border-box;
    background-color: blue;
    float: left;
}

Javascript

function showNav() {
    $("#navbarDiv").show();
    $("#mainPageDiv").width("83.3333%");
    $("#allContainer").width("120%");
}
showNav();

HTML

<div id="allContainer">
    <div id="navbarDiv">
        <p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    </div>
    <div id="mainPageDiv">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    </div>
</div>