html - 带侧边栏的居中内容(无标题)

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/