Question

我正在为我的网站创建一个导航器，它有5个按钮：Button1-4和background-image作为Button5。

如果您使用宽度最大化浏览器窗口并仅按高度缩小，例如1280x300，您将看到div容器背景与按钮关闭，看起来很糟糕，请查看结果{{3 }}

通过我的研究，我尝试了一些似乎不起作用的可能选项，div menu style：

.menu {
    position: fixed;
    display: inline-block; /* did not work */
    overflow: auto; /* did not work */
    top: 0%;
    left: 0%;
    right: 0%;
    background-color: black;
    height: 100%;
    width: 100%;
    border-style: solid;
    border-color: black;
    border-radius: 3%;
    z-index:99;
    max-height: 15%; /* non of these below worked. */
    max-width: 100%;
    min-height: 15%;
    min-width: 100%; 
}

为什么即使它超过max和min宽度，它也会随着窗口向下延伸？如何避免我的div菜单使用浏览器进行拉伸和缩放？ css的选项有哪些？

here

Answer 1

为了防止div容器拉伸，在定义宽度和高度时，不要使用％，因为这意味着div的宽度和高度会根据浏览器窗口的宽度和高度而改变。请改用px，不应该有这样的问题。

.menu {
  display: inline-block;
    position: fixed;
    top: 0%;
    left: 0%;
    right: 0%;
    background-color: black;
    height: 100px;
    width: 100%;
    border-style: solid;
    border-color: black;
    border-radius: 3%;
    z-index:99;
}`

这应该有效。您可以在此处查看更改： https://jsfiddle.net/4bm2kxxj/4/

同样可以使用按钮，给出边距，宽度和高度px值而不是％值;

这应该可以解决问题。

一个好主意是在代码中使用媒体查询来在特定条件为真时更改元素的css。 http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

或者像Bootstrap这样的框架，其中所有内容都是预制的，您只需要学习如何在项目中使用它。

Answer 2

我认为这就是您所寻找的：https://jsfiddle.net/4bm2kxxj/2/

添加以下行：

  overflow:hidden;

到菜单类

Answer 3

以像素为单位给出min-height而不是百分比。由于您已经以百分比指定height和max-height，因此您的布局可以支付min-height像素。为了演示，我使用100px作为height

演示： https://jsfiddle.net/4bm2kxxj/3/

CSS：

.menu {
  display: inline-block;
  overflow: auto;
  position: fixed;
  top: 0%;
  left: 0%;
  right: 0%;
  background-color: black;
  height: 100%;
  width: 100%;
  border-style: solid;
  border-color: black;
  border-radius: 3%;
  z-index: 99;
  max-height: 15%;
  max-width: 100%;
  min-height: 100px; /*can be any other value*/
  min-width: 100%;
  overflow: hidden;
}

CSS：防止div容器缩放或拉伸

3 个答案: