如何在调整浏览器窗口大小时防止固定div被剪裁 [英] How to prevent a fixed div from clipping when resizing the browser window

问题描述

大家好，



我想在html页面的顶部制作一个固定的工具栏，问题是我什么时候 - 大小浏览器的窗口大小，工具栏的内容中会出现一个截止值。我想让这个工具栏里面的内容不是剪辑。你能告诉我该怎么办吗？



和提前用的比例:)



这是一个简单的代码：



< div class =toolbar>

< div class =toolbar-content>

< div class =user-photo>

用户照片

< / div>

< div class =user-name>

用户名

< / div>

< div class = 用户设置>

用户设置

< / div>

< / div>

< / div>



这是CSS：



div.toolbar {

位置：固定;

顶部：0;

左：0;

背景颜色：＃061b34;

z-index：1;

身高：46px;

宽度：100％

}



div.toolbar-content {

位置：相对;

身高：46px;

宽度：745px;

顶部：1px;

margin-left：auto;

margin-right：auto;

}

解决方案

< blockquote>固定布局通常是一个非常糟糕的主意。但如果你真的想要修复它，那就准备面对裁剪了。你能做什么？暂时使它不固定，移动等等但为什么呢？这会让它不太固定，那么为什么要用固定的布局折磨自己呢？



也许你应该更好地检查你的设计。特别是，您可以向相反的方向移动并采用liqiud，流畅，弹性设计，如我过去的答案所述：网页屏幕分辨率（Cross Browser \ Cross Platform）问题 [ ^ ]。



这只是一个建议。你可以想到其他的东西，但在所有情况下，我都会建议你检查你的设计。

-SA

Hi all,

I want to make a fixed toolbar at the top of html page, the problem is that when I re-size the browser's window size, a cutoff appears in the toolbar's content. I want to make the contents inside this toolbar not clipping. Could you please tell me what to do ?

and thanx in advance :)

this is a simple code:

<div class="toolbar">
<div class="toolbar-content">
<div class="user-photo">
user-photo
</div>
<div class="user-name">
user-name
</div>
<div class="user-setting">
user-setting
</div>
</div>
</div>

and this is CSS :

div.toolbar{
position: fixed ;
top: 0;
left: 0;
background-color: #061b34;
z-index: 1;
height: 46px;
width: 100%
}

div.toolbar-content{
position: relative;
height: 46px;
width: 745px;
top: 1px;
margin-left: auto;
margin-right: auto;
}

解决方案

Fixed layout is generally a pretty bad idea. But if you really want it fixed, be prepared to face clipping. What can you do? Temporarily makes it not fixed, move, etc. But why? It would make it not quite fixed, so why torturing yourself with fixed layout at all then?

Perhaps you should rather review your design. In particular, you can move to the opposite direction and embrace liqiud, fluid, elastic design, as referenced my past answer: Webpage screen resolution (Cross Browser\Cross Platform) problem[^].

This is just a suggestion. You can think of something else, but in all cases, I would advice to review your design.

—SA

这篇关于如何在调整浏览器窗口大小时防止固定div被剪裁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！