две полосы прокрутки на разбивке по центру.

Я пытаюсь построить разделенный по центру макет с помощью бутстрапа. левая сторона экрана должна быть зафиксирована, а правая сторона экрана должна прокручиваться.две полосы прокрутки на разбивке по центру.

Он работает нормально до сих пор, но когда я тестирую макет на небольших устройствах, правая часть экрана получает две полосы прокрутки. Когда я скрываю полосу прокрутки на небольших устройствах, содержимое с правой стороны больше не прокручивается.

изменение overflow:auto; до overflow:visible; решает проблему с двумя полосами прокрутки, но с левой стороны экрана больше не фиксируется и свитки с правой стороны. position:fixed; не решает проблему.

вот код:

.lw { font-size: 60px; } 
 

 
body { 
 
    
 
    margin: 0; 
 
} 
 

 
#left { 
 
    
 
    background-color: yellow; 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
#right { 
 
    background-color: pink; 
 
    height: 100%; 
 
    overflow: auto; 
 
    text-align: center; 
 
    font-size: 8vw; 
 
} 
 

 
.container_left { 
 
    padding-top: 10%; 
 
    padding-bottom: 10%; 
 
} 
 

 
#question { 
 
    text-align: center; 
 
    font-size: 4vw; 
 
    padding-bottom: 50px; 
 
} 
 

 
#tip { 
 
    text-align: center; 
 
} 
 

 
@media screen and (max-width: 768px) { 
 
#right{ 
 
    overflow: hidden; 
 
} 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-lg-6" id="left"> 
 
     <div class="container_left"> 
 
     <p id="question">Lorem ipsum dolor sit amet</p> 
 
     <p id="tip">tip</p> 
 
     </div> 
 
    </div> 
 
    <div class="col-lg-6" id="right"> 
 
     <p style="color:red">start</p> 
 
     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
 
     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
 
     <p style="color:red">end</p> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>

Я был бы признателен за ваши советы.

наилучшими пожеланиями

источник

2016-12-21 filmtablette

Добро пожаловать в переполнение стека! Вопросы, требующие помощи по коду, должны содержать кратчайший код, необходимый для его воспроизведения ** в самом вопросе **, предпочтительно в ** Stack Snippet **. Хотя вы указали ссылку, если она станет недействительной, ваш вопрос не будет иметь ценности для других будущих пользователей SO с той же проблемой. См. [** Что-то на моем веб-сайте не работает, я могу просто вставить ссылку **) (http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project- оленья кожа-работа-кан-я-просто-паста-а-канальном к ней). –

Примените этот CSS, чтобы скрыть полосу прокрутки в вашем втором блоке. Это скроет скроллбар в этом отдельном элементе, но сохранить основную полосу прокрутки сайта:

#element::-webkit-scrollbar { 
    display: none; 
}

Обратите внимание, что это не будет иметь полную поддержку браузера.

Другим, лучшим решением было бы переработать ваш html/css вообще, чтобы первый блок был установлен в фиксированном положении, в то время как остальная часть страницы прокручивается как обычно. Это будет иметь более широкую поддержку на всех платформах. Таким образом, вы не играете с полосами прокрутки.

источник

2016-12-21 17:01:22

две полосы прокрутки на разбивке по центру.

ответ

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