Question

好的，这是一个非常愚蠢的问题，但我无法让它发挥作用。我希望页面的一部分为20％，另一边为100％，总宽度为120％。现在，我正在做这一切来试验jQuery和一个导航栏，但我不能为我的生活让这些div溢出，所以底部有一个滚动条。所有这一切都是100％div低于20％div。我试过浮子，但那些不起作用，我不知道为什么。感谢您的帮助

CODE

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

块元素的自然行为（<div>和<p>标记的默认显示属性是在没有足够空间的情况下低于之前的内容。因此，你只需拥有它们要做的是将块放入宽度为120％的容器中。

小提琴：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>

页面不会溢出

1 个答案: