带侧边栏的居中内容（无标题）

Question

我想使用侧边栏作为导航，并将内容置于用户屏幕的中心。我有一个带有侧边栏的工作设置，内容位于侧边栏右侧和屏幕右侧之间，但这让我很困扰。我怎样才能有一个居中的内容和一个侧边栏。内容不得低于或超过侧边栏。调整大小时，侧边栏也不能被内容推离屏幕。不用担心移动设备，因为我稍后会用折叠菜单处理这个问题。 :P

正如您在 codepen 中看到的，内容居中，但位于侧边栏下方。 :( 我只是将它构建为一个简单的开始和视觉效果，供任何有兴趣调整代码的人使用。

这是我的Codepen的链接。

如果您将 codepen/jsfiddle 的代码基于我的 codepen 代码，那将非常有帮助。谢谢！ :) 任何帮助都非常感谢，我提前感谢你。

HTML：

<div class="site-header">

<ul class="main-navigation"><a href="#">Overview</a>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="content">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>

CSS：

.content {
    position: relative;
    float: right;
    border: 1px solid yellow;
    word-wrap: break-word;
    white-space: normal;
    margin: auto;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
}

.site-header {
    padding: 1em;
    display: inline-block;
    top: 0;
    left: 0;
    right: 0;
    width: 12%;
    height: 100%;
    float: left;
    text-align: right;
    position: fixed;
    overflow: hidden;
    z-index: 1;
    border: 1px solid green;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    // background-color: blue;
}

.main-navigation {
    position: absolute;
    bottom: 40px;
    right: 0;
    cursor: default;
    // border: 1px solid red;
    list-style-type: none;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    -webkit-padding-start: 0;
}

Answer 1

您可以在 90 之类的内容上设置百分比宽度，在侧边栏上设置 10% 的宽度。

.content{
     border: 1px solid red;
     width: 90%;
 }
.site-header{
     width: 10%;
     border: 1px solid green;
 }

如果我明白你想要什么，这是一个 jsfiddle。 https://jsfiddle.net/49t0kspp/