Question

我正在尝试在左侧创建一个带有固定“侧边栏”的网站，并且“内容”在网站的剩余部分（右侧）上垂直和水平居中。无论屏幕大小如何，我都希望“内容”始终居中。我试过了margin-left：auto;和保证金权利：auto;但是当我这样做时，内容将自己置于侧边栏的顶部。谁能帮我？这是指向图像的链接，以显示我的意思https://www.dropbox.com/s/95duw8yrmlwtc26/Sk%C3%A4rmavbild%202015-01-22%20kl.%2011.51.10.png?dl=0。这是我目前的代码，侧边栏是“旁边”，内容是“主要”内的所有内容：

<aside> this box should always be fixed on the left and have a height of     100%. 

</aside><!--end side--> 


<main>

<div id="submenu">
<ul>
<li>LOGOS</li>
<li>PRINT</li>
<li>WEB DESIGN</li>
<li>ALL</li>
</ul>
</div>

<div class="content">
<ul>
<li><img src="img1" alt="img1"/></li>
<li> <img src="img2" alt="img2"/></li>
<li> <img src="img3" alt="img3"/></li>
</ul>
</div><!--end content-->
</main>

aside{
background-color:#3A364F;
width:340px;
height:100%;
min-height:710px;
position:fixed;
float:left;

}
main {
width:67%;
float:left;
margin-left:auto;
margin-right:auto;
}

Answer 1

这可能是一个很好的解决方案，如果你正在使用CSS3（它还没有“正式”出来，但大多数（如果不是所有浏览器都支持它）：

div#submenu {
    background-color:#3A364F;
    width:340px;
    height:100%;
    min-height:710px;
    position:fixed;
    top: 0px;
    left: 0px;
    background-color:blue;
}
div.content {
    margin-left:340px;
    margin-right:auto;
    background-color:red;
}

我设置jsFiddle来演示此代码。

margin-left:auto; margin-right:auto仅在其放置的对象具有指定宽度（即非百分比）时才有效。我相信使用calc(...)最终会解析为“指定的宽度”。如果您的意思是您希望内容实际上居中在剩余区域内（并且不仅占用子菜单未占用的所有空间），那么您可以做的就是添加另一个<div>位于红色<div class="content">内，其中包含规则，然后将嵌套的<div>置于其红色父级内。

代码的另一个问题可能是您将CSS规则应用于不存在的对象;我假设您希望将规则aside应用于子菜单，并main应用于content。

Answer 2

也许你也可以看一个好的框架来创建你的网站。许多框架都有模板和良好的文档来构建网站。好的框架是Bootstrap，Foundation和Skeleton。

如果您希望坚持当前的构建，Alec的解决方案，您实际计算给定测量值340px周围的剩余空间;

将div固定在一侧，固定菜单

2 个答案: