ShellRox ShellRox - 5 months ago 10
CSS Question

CSS: preventing div container to scale or stretch

I am creating a navigator for my website which has 5 buttons: Button1-4 and background-image as Button5.

If you maximize your browser window with width and scale it down by height only,

1280x300
for example, you will see that div containers background is off from the buttons, which looks terrible, see the result here.

By my research, i have tried every possible options which didn't seem to work, 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%;
}


Why is it stretching down with window even when it exceeds its
max
and
min
width? How can i avoid my div menu to stretch and scale with browser? What are the options with css?

Full code.

K K K K
Answer

Give min-height in pixels instead of percent. Since you are already specifying height and max-height in percent, your layout can afford the min-height in pixels. For sake of a demo, I used 100px as height

Demo: 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;
}