1

我遇到了 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;
}

有任何想法吗？

4

3 回答 3

2

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

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

您可以调整顶部和左侧的位置以使所有内容都适合您的喜好，但这应该大致将侧边栏置于正确的位置。:)

于 2012-12-02T05:49:17.027 回答
2

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

于 2012-12-02T07:13:26.840 回答
0

快进到 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>

于 2019-12-16T12:53:45.013 回答