Help with css menu

Question

Guys I’ve put together a simple menu in css. But I have a problem. This menu is inside a div header that stays fixed on the screen. So if the menu has a lot of option it is not possible to select them because it gets cropped. A simple and cool solution would be to put a scroll, but 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 it this way:

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

But it didn’t work, someone knows some way to fix it

.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>

Answer 1

Replace the heigth: 100% for height: 100vh;

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

See on Jsfiddle

vh will set the height to 100%. It is a new CSS3 drive. All major modern browsers support it.

See the compatibility here.