2 Исправлены навигационные панели полной ширины и высоты браузера

0

Я хочу поместить: зафиксировать навигацию в левой части окна браузера (высота 100%). Затем с правой стороны я хочу исправить subnav в верхней части окна браузера (ширина 100%), так что, когда страница прокручивается, оба навигатора придерживаются. И если размер окна изменяется, бары всегда работают на 100%.

У меня почти есть это, единственная проблема заключается в том, что верхний навигатор не учитывает ширину левого навигатора. Таким образом, он позволяет прокручивать вбок. Вот мой html/css:

     html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        text-align: left;
}

    div.leftnav {    
        width: 160px;
        height: 100%;
        float: left;
        display: inline;
        position: fixed;
        top: 0;
        left: 0;
        margin: 0;
        padding: 20px;
    }

    div.rightpage { 
        float: left;
        margin: 0;
        padding-left: 200px; 
        width: 100%; 
        height: 100%; 
    }

    div.rightpage div.topnav {
        width: 100%;
        height: 20px;
        float: left;
        position: fixed;
        top: 0;
        margin: 0;
        padding: 15px;
        display: inline;
    }

    div.rightpage div.content {
        padding: 50px;
        min-height: 1200px;
    }

    <body>
        <div class="leftnav">
        </div>
        <div class="rightpage">
            <div class="topnav"></div>
            <div class="content"></div>
        </div>
    </body>

Помогите?? Благодарю!

Теги:
navigation
position
fixed

2 ответа

1
Лучший ответ

Вы можете использовать функцию calc чтобы сделать .rightpage правильной шириной.

html, body {
  width: 100%;
  height: 100%;
}

.leftnav {
  width: 160px;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: blue;
}

.rightpage {
  width: calc(100% - 160px);
  height: 100%;
  margin-left: 160px;
  background: red;
}

.topnav {
  width: 100%;
  height: 40px;
  left: 160px;
  top: 0;
  background: green;
}

Просмотрите эту демо-версию codepen

Поделиться
  • 0
    Да, это именно то, что я иду! Спасибо! На что похожа поддержка браузера для функции calc? Я видел эту структуру навигации на многих различных веб-сайтах. Как вы думаете, они в основном используют метод функции calc? Или есть лучшая практика?
  • 0
    Вы можете увидеть полную таблицу совместимости <a href=" caniuse.com/#search=calc"> здесь </ a >. Поддержка в настольных браузерах достойная, но Android и старые мобильные Safari плохие. Вы можете использовать процентную ширину, чтобы избежать этого, с поддержкой медиа-запросов. В качестве альтернативы вы можете сделать что-то вроде этого: codepen.io/the_ruther4d/pen/2bc0ae867f211fbc9836bf55be5e3abb/…
Показать ещё 2 комментария
0

Вы можете добавить

div.rightpage div.topnav {
    width: 100%;
    height: 20px;
    float: left;
    position: fixed;
    top: 0;
    margin: 0;
    padding: 15px 15px 15px 160px; //Would force the whole of topnav content to the left 160px..
    display: inline;
}

Изменить:... Я бы потенциально добавил -moz-box-sizing:border-box; box-sizing: border-box; -moz-box-sizing:border-box; box-sizing: border-box; по крайней мере, этому элементу. Это предотвратит выход ваших 100% элементов из пределов от прокладки.

Поделиться
  • 0
    У меня уже есть левая обивка на странице div.right контейнера. Так что это работает, проблема в том, что мой контент выходит за границы 200px вправо. Поэтому, когда я настраиваю размер окна, текст переносится, но это выходит за границы.
  • 0
    Да, вы хотели бы иметь размер коробки для ширины, которая будет установлена. Прокладка выталкивает его, но размер коробки испортит его. Вы также захотите использовать размер окна с фактическим ответом на этот вопрос также на случай, если ваш отступ будет вытеснен. Это хорошая практика.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню