Меню (position: fixed в position: fixed)

[vadim5june]

vadim5june,
fixed для внутренних элементов не нужен -это Вы все верно казали -
Но таблица из двух строк засунутая в меню со 100% шириной -высотой решает проблемы и span и скролл блока

меня смущала только fixed внутри fixed что я считаю неверно

[bes]

Но таблица из двух строк засунутая в меню со 100% шириной -высотой решает проблемы и span и скролл блока

Deff, я кстати там внешний блок убрал, спозиционировал саму таблицу, итак всё нормально.

а fixed что дает?точно так же высота будет меняться
зато из-за задания top в процентах для head-20% а для content-25% при масштабировании одна на другую наезжает

Ваш вариант рабочий, за исключением того, что при слишком большом увеличении небольшая часть начинает вылезать за пределы блока, а также того, что полоса прокрутки "гуляет" по отношению к низу основного блока, что портит визуальный эффект.
И я не понял эту фишку насчёт top, разве top учитывается для статично позиционированных элементов?

Убрал, что показалось лишним.

<style>
  body {
    background: lightgrey;
  }

 .menu {
    position: fixed;
    left: 20%; 
    top: 20%; 
    width: 60%; 
    height: 60%;
    background-color: grey;
  }

  .head {
    background: maroon; 
    color: whitesmoke;
  }

  .content {
    height: 80%;
    overflow: auto;
  }

  .x {
    position: absolute;
    right: 2%; 
    cursor: pointer;
  }
</style>
 

<div class="menu" id="menu">
  <div class="head">
    <span>Меню</span>
    <span class="x" onclick="this.parentNode.parentNode.style.display = 'none'">x</span>
  </div>
  <div class="content">
    <a href="#">link1</a><br>
    <a href="#">link2</a><br>
    <a href="#">link3</a><br>
    <a href="#">link4</a><br>
    <a href="#">link5</a><br>
    <a href="#">link6</a><br>
    <a href="#">link7</a><br>
    <a href="#">link8</a><br>
    <a href="#">link9</a><br>
    <a href="#">link10</a><br>
    <a href="#">link11</a><br>
    <a href="#">link12</a><br>
    <a href="#">link13</a><br>
    <a href="#">link14</a><br>
    <a href="#">link15</a><br>
    <a href="#">link16</a><br>
  </div>
</div>

[vadim5june]

И я не понял эту фишку насчёт top, разве top учитывается для статично позиционированных элементов?

это от Вашего варианта осталась-не нужна конечно

[bes]

Всё же, реально ли спозиционировать при помощи css два div-a внутри третьего так, чтобы первому div не была задана высота (иначе возникнет развал верстки из-за его внутреннего содержимого), а высота второго div была равна расстоянию от низа первого до низа третьего (основного)?
Пока видится, что нет, поэтому таблица даёт лучшее решение.

[vadim5june]

Всё же, реально ли спозиционировать при помощи css...

с помощью javascript можно
по событию onresize вычислять высоту второго блока как разницу

[bes]

с помощью javascript можно

Да, это можно, речь именно о css

[Deff]

чтобы первому div не была задана высота

ну можно наверно, если второму задать display:inline-block; height:100%;
а у первого- width:100%; но имхо таблицы - позволяют выигрывать скорость вместо спотыканий на таких вещах

Пока для divов не будет нормального вертикального центрирования - всё это изъё