Question

我是网站设计的新手，需要帮助设置一个页面高度为100％但宽度为70％的div，宽度可以设置并居中，但高度仅与内容本身一样高。例如像http://www.thelounge.fi/，但是滚动部分位于左侧，而我希望它位于中心。

谢谢。

Answer 1

好。在这种情况下，我们有两个解决方案：

您可以将div display属性设置为inline或inline-block。然后为div父级设置text-align属性为center，如您在此处所见https://jsfiddle.net/ivan0013/7q9Lp45q/
或者您可以给孩子一个保证金，如果它有width，display属性设置为block，这是默认值，例如display 3}}

进一步说明：

在第一个解决方案中，您更改display属性的div默认值。当您将tex-align设置为内联时，您正在创建一个行元素，该行元素不会占用所有空间。然后，您更改父项的block属性，这意味着所有行项目的子项都将居中。

对于第二个，我们使用display的{{1}}值。使用这个元素，在我们的例子中，div是可用的全部宽度。出于这个原因，我们需要设置一个宽度，例如25％。现在，div仅占父母的25％。最后一步是添加一个边距，这是到父边界的距离。在小提琴中我们设置margin: 0 auto，这意味着div的上下边距为0，并且每边都会有一个自动边距。

一个很好的参考：https://jsfiddle.net/ivan0013/wwu5ttxt/

Answer 2

如果你不想在带有溢出滚动的单独div中设置hello div的内容，并且你想保持你的HTML，你可以使用相同的导航栏高度向上打招呼并设置导航栏左（100-70））/ 2 = 15

  body {
        /*background-color: #f0f0f2;*/
		background-color:green;
		background-attachment:fixed;
        margin: 0;
        padding: 0;
        font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
		overflow-y:scroll;

    }

	
	.hello {	
		
		width:70%;
		background-color:white;
		text-align:center;
		margin:auto;
		position:relative;
		background-position:center;
		/*margin-top:60px;*/
		margin-bottom:20px;
		height:100%;
        margin-top:60px;

	}
	
	.navbar {
		
		align:center;
		background-color:gray;
		background-attachment:fixed;
		height:40px;
		padding-top:20px;		
		box-shadow: inset 0 -3px 3px rgba(0,0,0,0.5), inset 0 3px 3px rgba(255, 255, 255,1);
		position:fixed;
		width:70%;
		top:0;
        left:15%;
	}
	
	.navbar2 {
		
		align:center;
		background-color:gray;
		height:20px;
		width:100%;
		bottom:0;
	}

<body>
	
<div class="hello">
	<div class="navbar">NAVAGATION BAR
	</div>

<p>test1</p>
    <p>test2</p>
    <p>test3</p>
    <p>test4</p>
    <p>test5</p>
    <p>test</p>
    <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
<p>test</p>

<p>test</p><p>test</p>
<p>test</p><p>test</p>
<p>test</p><p>test</p>
<p>test</p>

	<div class="navbar2">Bottom Bar
	</div>	

</div>

</body>

HTML居中的div滚动+菜单

2 个答案:

进一步说明：