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/

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

1 个答案: