Help with menu in css

Navigation
1

Galera I built a very simple menu in css. But I have a problem. This menu is located inside a% div that is fixed on the screen. So if the menu has a lot of option, it is not possible to select them because it is cut. A simple and cool solution would be to put a scroll, however I need the menu to open the size of the screen, and if it does not fit a scroll has to appear. I tried to do this as follows: 

        .top_sub_menu .scroll {
        overflow: auto;
        width: auto;
        height: 100%;
    }

But it did not work, does anyone know how to solve this? 

.header {
  position: fixed;
}
.sub_menu_fim {
  border-bottom: 1px solid #FFFFFF;
}
.sub_menu_inicio {
  border-top: 1px solid #FFFFFF;
}
.top_sub_menu {
  margin-top: 7px;
}
.top_sub_menu .scroll {
  overflow: auto;
  width: auto;
  height: 100%;
}
.title_menu {
  background: #0091FF;
  padding: 10px 8px;
  display: block;
  color: #FFFFFF;
  border-left: 1px solid #FFFFFF;
  border-right: 1px solid #FFFFFF;
  font-weight: bold;
}
.menu {
  display: inline-block;
  margin-right: -5px;
  position: relative;
  padding: 2px 5px;
  height: 25px;
}
.menu:hover div {
  display: block;
  visibility: visible;
  left: 0;
}
.link_menu {
  padding: 0;
  position: absolute;
  width: 260px;
  visibility: hidden;
}
.link_menu_esquerda {
  margin: 0 0 0 5px;
}
.link_menu_direita {
  margin: 0px 0 0 -229px;
}
.sub_menu {
  padding: 10px 8px;
  cursor: pointer;
  display: block;
  color: #FFFFFF;
  background: #484848;
  border-left: 1px solid #FFFFFF;
  border-right: 1px solid #FFFFFF;
}
.sub_menu:hover {
  background: #0091FF;
}
<div class='header'>
  <div class='menu'>
    <div class='mini_botao mini_botao_blue_hover'>
      menu
    </div>

    <div class='link_menu link_menu_esquerda'>
      <div class='top_sub_menu'>
        <div class='sub_menu_inicio'></div>
        <div class='title_menu'>Caixas</div>
        <div class="scroll">
          <div class='sub_menu'>menu 1</div>
          <div class='sub_menu'>menu 1</div>
          <div class='sub_menu'>menu 1</div>
          <div class='sub_menu'>menu 1</div>
          <div class='sub_menu'>menu 1</div>
          <div class='sub_menu'>menu 1</div>
          <div class='sub_menu'>menu 1</div>
          <div class='sub_menu'>menu 1</div>
          <div class='sub_menu'>menu 1</div>
          <div class='sub_menu'>menu 1</div>
          <div class='sub_menu'>menu 1</div>
          <div class='sub_menu'>menu 1</div>
          <div class='sub_menu'>menu 1</div>
          <div class='sub_menu'>menu 1</div>
          <div class='sub_menu'>menu 1</div>
          <div class='sub_menu'>menu 1</div>
          <div class='sub_menu'>menu 1</div>
          <div class='sub_menu'>menu 1</div>
          <div class='sub_menu'>menu 1</div>
          <div class='sub_menu'>menu 1</div>
          <div class='sub_menu'>menu 1</div>
          <div class='sub_menu'>menu 1</div>
        </div>
        <div class='sub_menu_fim'></div>
      </div>
    </div>
  </div>
</div>
    
asked by anonymous 01.11.2016 / 12:54

1 answer

2

Replace heigth: 100% with height: 100vh; 

.top_sub_menu .scroll {
  overflow: auto;
  width: auto;
  height: 100vh;
}

See in JsFiddle

vh will set the height to 100% . It's a new CSS3 unit. All major modern browsers support it.

See compatibility .

    
01.11.2016 / 13:14
Php session is broken when at two sites on the same apache server Service with list of cars and models