Question

如果之前有人问过我，我会事先道歉但不幸的是我似乎无法找到答案 - 也许我在搜索时使用了错误的条款。

然而。我正在构建一个非常简单的网站来显示我的投资组合，我决定在左侧放置一个固定的侧边栏，在右侧滚动主要内容。假设网站的“活动部分”从侧边栏结束开始，我需要将我的内容置于侧边栏末端和浏览器窗口末端之间。

我将内容浮动到右边并设法让它看起来像我想要的但只能通过设置特定的边距。

正如你可以看到我的笔记本电脑上看到的结果，这个分辨率是正确的，但是如果窗口的大小增加，内容显然是在右边，左边距比右边距更大这是我不想要的。

是否可以将主要设置本身放在中心位置，以便两个边距的分辨率不同？

HTML

<div id="main">

<div class="title-contents">
    <h1 class="page-name">Stuff I Make</h1>
    <div class="gallery-icon"><a href="grid.html"><img src="images/grid-icon.jpg"/></a></div>
    <div class="gallery-icon"><a href="banners.html"><img src="images/line-icon.jpg"/></a></div>
    <div style="clear:both"></div>
</div>

CSS

#main {
background-color:#fff;
width:780px;
height:100%;
margin:60px;
float:right;
padding-left:40px;
padding-right:40px;
padding-top:40px;
padding-bottom:60px;
}

感谢大家阅读并最终回答，请原谅我明显缺乏知识，几周前我开始这样做了，所以如果这个问题超出愚蠢只是试着理解，啊哈;）谢谢！

婆婆纳

编辑：fiddle ...我希望它很清楚。你可以看到右边的主要棍子，因为我将它设置为浮动：右边，但如果我将它设置为浮动：中心它停留在侧边栏的页面中间。我希望它始终保持在侧边栏旁边的空间中心。

要回答这个问题，侧边栏的宽度是固定的。谢谢！！！！：）

Answer 1

您需要一个侧边栏和内容的容器。您可以通过应用等于边栏宽度的padding-left和容器的margin:0 auto来固定侧边栏的位置并将内容对齐在剩余空间中。

以下是快速响应式设置：

HTML

<div id="page">
  <div id="sidebar"></div>
  <div id="main"></div>
</div>

CSS：

#page{
  height:100%;
  padding-left:10%; // equal to the width of sidebar
}
#sidebar{
    position:fixed;
    top:10%;
    left:0;
    width:10%;
    height:80%;
}
#main {
    width: 80%;
    height: 100%;
    margin:0 auto; // center align horizontally
}

尝试在后面的小提琴中调整输出窗口的大小：

Demo

Answer 2

使用百分比布局时，我建议您使用TJ的答案。

如果你想让侧边栏有一个固定的宽度，我使用主要部分的绝对位置给你这个解决方案：

HTML：

<div id="sidebar">
    sidebar
</div>

<div id="main">
    <div>
        content
    </div>
</div>

CSS：

#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 150px;
    height: 100%;
    background: lightblue;
}
#main {
    position: absolute;
    top: 25px;
    right: 25px;
    bottom: 25px;
    left: 175px; /* width of #sidebar + extra margin */
}
#main > div {
    width: 100%;
    min-height: 100%;
    background: lightgreen;
}

它做什么：侧边栏有固定的位置和固定宽度。如果你想要，可以通过左右顶部位置来增加边距。

#main div是绝对的。顶部，右侧和底部位置都设置为相同的数字（在示例中为25px）。左侧位置是侧边栏的宽度加上额外的边距（在示例中为150 + 25 = 175px;

另见this demo。

脚注：#main内的额外div用于当内容的长度大于#main时，背景将展开。见extra demo。万一它都适合它，只需删除div（并在#main上放置一个背景。）

Answer 3

不确定你在找什么，但也许这个？

<强> HTML

<div class="one">

    Here's room for the side menu

    <ul>
        <li>option 1</li>
        <li>option 2</li>
        <li>option 3</li>
        <li>option 4</li>
        <li>option 5</li>
        <li>option 6</li>
        <li>option 7</li>
        <li>option 8</li>
        <li>option 9</li>
    </ul>

</div>

<div class="two">

        <div id="main">

        <div class="title-contents">
            <h1 class="page-name">Stuff I Make</h1>

            <div style="clear:both"></div>
        </div>

    </div>

  </div>

<强> CSS

#main {
border: 2px solid red;
width:80%;
height:100%;
margin: 0 auto;
padding-left:40px;
padding-right:40px;
padding-top:40px;
padding-bottom:60px;
box-sizing: border-box;  
}

.one {
    border: 2px solid green;
    float: left;
    width: 20%;
    display: block;
    box-sizing: border-box;
    height: 100%;
}

.two {
    border: 2px solid blue;
    float: left;
    width: 80%;
    display: block;
    box-sizing: border-box;
}

这是Fiddle

将主要居中放在侧边栏旁边

3 个答案:

Demo