Question

我遇到了html / css的问题。

你有这个设计：

HHHHHHHHHH
CCCCCCCSSS
CCCCCCCSSS
CCCCCCCSSS
CCCCCCCSSS
FFFFFFFFFF

H是我的标题，F页脚，C内容和S我的侧边栏。

我已经将我的标题固定在顶部而我的页脚位于底部，所以无论我有多少内容，页眉和页脚都会显示。

由于我的侧边栏只有少量数据，我也希望修复它。我希望侧边栏保持在标题下方，即使内容太大也始终可见，我需要滚动才能到达页面底部。

你有这个代码：

.container {
    min-height:100%;
    position:relative;
}
.header {  
    position: fixed;
    top: 0;
    background:#f1f1f1;
    width: 100%;
    margin: 0px auto;
}
.sidebar {
    float: right;
    width: 300px;
    background-color: #FFF;
    padding:10px;
    padding-bottom: 100px;
    padding-top: 50px;
}
.content {
    width: 960px;
    padding:10px;
    padding-bottom: 100px;
    padding-top: 50px;
    margin-left: 100px;
}
.footer {
    position:fixed;
    bottom:0;
    width:100%;
    height:60px; 
    background:#f1f1f1;
    text-align: center;
    vertical-align: middle;
}

有什么想法吗？

Answer 1

尝试将侧边栏的位置“固定”，同时说明其确切位置。因此，您需要将以下内容添加到CSS中的div类“侧栏”中：

position: fixed;
left: 1110px;
top: 30px;

您可以调整顶部和左侧位置以使一切适合您的喜好，但这应该大致将侧边栏放在正确的位置。：）

Answer 2

您应该考虑的另一件事是，如果用户的屏幕分辨率小于1110像素宽，他们将根本看不到侧边栏。你可能想尝试一种更流畅的方法，使用百分比来计算位置 - 或者如果你想要它在右边，你应该使用'right：'属性而不是左边。

Answer 3

快进到2019年，您现在可以使用position: sticky进行此操作。

通过这种方式，侧栏会正常滚动，直到滚动出视线为止，在这种情况下，它始终保持可见状态。 https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning

第一个实验性支持是在2013年，多数支持是在2017年，当前支持是93％。 https://caniuse.com/#feat=css-sticky

#example-element {
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
}

#example-element { background-color: #ff0; border: 3px solid red; z-index: 1; }
#example-element-container { max-width: 15em; }
.box { background-color: rgba(0, 0, 255, .2);  border: 3px solid #00f; float: left; width: 65px; height: 65px; }
.box+.box { margin-left: 10px }
.clear { clear: both; padding-top: 1em }

<div id="example-element-container">
  <p>In this demo you can control the <code>position</code> property for the yellow box.</p>
  <div class="box"></div>
  <div class="box" id="example-element"></div>
  <div class="box"></div>
  <p class="clear">To see the effect of <code>sticky</code> positioning, select the <code>position: sticky</code> option and scroll this container.</p>
  <p>The element will scroll along with its container, until it is at the top of the container (or reaches the offset specified in <code>top</code>), and will then stop scrolling, so it stays visible.</p>
  <p>The rest of this text is only supplied to make sure the container overflows, so as to enable you to scroll it and see the effect.</p>
  <hr>
  <p>Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small unregarded yellow sun. Orbiting this at a distance of roughly ninety-two million miles is an utterly insignificant little blue green planet
    whose ape-descended life forms are so amazingly primitive that they still think digital watches are a pretty neat idea.</p>
</div>

内容滚动时，将侧边栏固定在顶部

3 个答案: