当前位置：文江博客话题详情

CSS 上边距随窗口缩小而缩小

发布于 2024-08-16 07:45:03 字数 329 浏览 12 评论 0原文

当窗口最大化时，我希望网页的上边距为 100px，但如果用户调整窗口大小以缩小它，我希望此边距缩小。边距的最小尺寸应为 10 像素，并应与窗口高度成比例缩小。

一个例子，如果我试图模拟的是 http://www.bing.com/

我会怎么做想要在 CSS 中实现这个吗？我目前正在纠结 min-height、min-width、height 和 width 。

谢谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小梨窩很甜 2024-08-23 07:45:03

如果没有看到一些代码，就很难给出很好的建议。但是，您可以将 html 和 body 设置为 100% 高度，这实际上应该符合浏览器可视部分的高度：

html, body{ margin:0; padding:0; height:100%; }

从那里，您可以将 div 直接添加到 body 中，并给出一个百分比高度：

#push{ height: 15%; }

你的 body html 看起来像这样：

<body>
    <div id="push"></div>
    <div>
        asdf asdf
    </div>
</body>

当 body 高度改变时，push 高度也会改变。您可能需要调整该数字以使其符合您的喜好。您还可以为推送指定最小高度，但 IE6 不支持此功能。另外，100% html / body 可能会给你带来麻烦，具体取决于你如何处理页脚和其他事情，所以要小心，祝你好运。

Without seeing some code, it's difficult to give a great suggestion. But, you can style the html and body to be 100% height which should actually conform to the height of the viewable portion of the browser:

html, body{ margin:0; padding:0; height:100%; }

From there, you can add a div directly into the body and give that a height that is a percentage:

#push{ height: 15%; }

Your body html would look something like:

<body>
    <div id="push"></div>
    <div>
        asdf asdf
    </div>
</body>

When the body height changes, so will the push height. You may need to tweak that number to get it to your liking. You can also give the push a min-height, but that is not supported in IE6. Also, that 100% html / body could give you trouble later depending on how you're doing your footer and things, so beware and good luck.

回复收藏 0 原文

~没有更多了~