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

Question

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

如果您将浏览器窗口的宽度最大化并仅按高度缩小，例如1280x300，您会看到 div 容器背景从按钮上消失了，这看起来很糟糕，请查看结果here。

根据我的研究，我已经尝试了所有似乎不起作用的选项，div menu 样式：

.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 有哪些选项？

Full code.

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

以像素而不是百分比给出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;
}

Answer 3

我想这就是你要找的东西：https://jsfiddle.net/4bm2kxxj/2/

添加这一行：

  overflow:hidden;

到菜单类