Переполнение прокрутки в скрытом один

У меня есть переполнение прокрутки в скрытом одинПереполнение прокрутки в скрытом один

Проблема заключается в том, что страница не прокручивается, так что я могу видеть остальную часть контента, уведомление, что я хочу боковая панель и верхняя панель, чтобы оставаться фиксированной на своем месте, только тело с серым цветом, чтобы прокручивать

html,body{ 
    background-color: #f8f8f8; 
    height: 100%; 
    overflow: hidden; 
} 
///////////////////////////////////////// 
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="background- color: #e5e2e6; color:#000000; padding-top: 20px; overflow:scroll;"> 
       test1<br/><br/><br/><br/><br/> 
       test2<br/><br/><br/><br/><br/> 
       test3<br/><br/><br/><br/><br/> 
       test4<br/><br/><br/><br/><br/> 
       test5<br/><br/><br/><br/><br/> 
       test6<br/><br/><br/><br/><br/> 
      </div>

источник

2016-03-18 Ghost Sites

Не имеет отношения к вопросу, но вам не нужно определять col-xs-9 col-sm-9 и т. Д. Эти стили будут каскадироваться, поэтому col-xs-9 по существу означает использование 9 из 12 позиций сетки для всех размеров хs и выше. Если вы хотите различное поведение при больших размерах, вы также можете определить их, например. col-m-10 –

Является ли это то, что вы хотите? See this fiddle

Удалить overflow: hidden; из html, body, а затем обновить HTML код, как это:

HTML код обновления:

<!DOCTYPE html> 
    <html> 
    <head> 
     <meta charset="UTF-8" /> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
     <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" /> 
    </head> 
    <body style="background-color: #e5e2e6;" > 
    <div class="container-fluid" style="height:100%;"> 
     <div class="row" style="height:100%;" align="center"> 
      <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 sidebar" style="height:100%; position: fixed; z-index: 10;"> 
       <p class="title" style="text-align:center; color:#FFFFFF; font-size:2.6vw;">TITLE</p> 
    </div> 
      <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9" style="background-color: #3a3633; color:white; z-index: 10; margin-left: 25%; position: fixed; "> 
       <span class="label label-default pull-left" style="font-size:15px; margin:1%;">TEST</span> 
       </div> 
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="background-color: #e5e2e6; color:#000000; padding-top: 30px; padding-left: 25%; "> 
         test1<br/><br/><br/><br/><br/> 
         test2<br/><br/><br/><br/><br/> 
         test3<br/><br/><br/><br/><br/> 
         test4<br/><br/><br/><br/><br/> 
         test5<br/><br/><br/><br/><br/> 
         test6<br/><br/><br/><br/><br/> 
        </div> 
       </div> 

      </div> 
     </div> 
    </div>

я добавил position: fixed; к элементам, которые вы хотели фиксированные и добавить отступы, чтобы показать содержимое надлежащим образом

Я изменил содержание серы:

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="background-color: #e5e2e6; color:#000000; padding-top: 30px; padding-left: 25%; ">

padding-left: 25%; из-за ширины левой панели

padding-top: 30px; из-за высоты верхней панели

Верхний бар:

<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9" style="background-color: #3a3633; color:white; z-index: 10; margin-left: 25%; position: fixed; ">

margin-left: 25%; ширина левой панели

Левая панель:
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 sidebar" style="height:100%; position: fixed; z-index: 10;">

z-index с position: fixed; используется поставить на первый план две фиксированные полосы

FYI

Ее не нужно включать все col-xscol-smcol-md и col-lg, если вы собираетесь использовать тот же размер столбца. например в том числе только col-xs-3 будет работать для всех col-xs-3col-sm-3col-md-3 и col-lg-3. И col-sm-9 будет работать col-xs-9col-sm-9col-md-9 и col-lg-9

источник

2016-03-18 16:01:41

Можете ли вы объяснить мне, что вы сделали, пожалуйста? –

Я не знаю почему, но когда я реализую ваше решение на своей странице, он не беспокоится –

Я отредактировал свое сообщение с пояснениями. Кстати, не используйте встроенный стиль с колонками начальной загрузки.Я думаю, что лучше отделить grid-системы и конкретные css, например,

, а затем создать его с помощью файла CSS –

Вы можете попробовать использовать бутстрэпы встроенных инструментов для обработки такого рода вещи. Используйте класс navbar-fixed-top для верхней панели и sidebar-nav для вашей боковой панели.

источник

2016-03-18 16:36:52

Переполнение прокрутки в скрытом один

ответ

Смежные вопросы