Bootstrap макет прокручиваемых div - PullRequest
Новая
       12

Bootstrap макет прокручиваемых div

0 голосов
/ 01 мая 2020

Я сделал скрипку , чтобы показать, что я пробовал, я хотел бы, чтобы у меня была страница без полос прокрутки, и чтобы элементы div влево и вправо получали полосу прокрутки при их переполнении.

Может кто-нибудь сказать, что мне не хватает? Или, если вы знаете более чистое решение, используя bootstrap, пожалуйста, дайте мне знать.

здесь также вставьте html для дальнейшего использования, когда срок действия скрипки истекает. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
  </head>

  <body>


<div class="container-fluid" id="my-container">
  <div class="row" id="my-full-row">


  <div class="" id="my-menu-col">
    M
  </div>

  <div class="col">
    <div class="row" id="my-title-row">
      Title row
    </div>
    <div class="row" id="my-row">
      <div class="col-sm-2" id="my-col-left">
        col left<br/>col left<br/>col left<br/>col left<br/>col left<br/>col left<br/>col left<br/>col left<br/>
        col left<br/>col left<br/>col left<br/>col left<br/>col left<br/>col left<br/>col left<br/>col left<br/>
        col left<br/>col left<br/>col left<br/>col left<br/>col left<br/>col left<br/>col left<br/>col left<br/>        
      </div>
      <div class="col-sm-10" id="my-col-right">
        col right<br/>col right<br/>col right<br/>col right<br/>col right<br/>col right<br/>col right<br/>
        col right<br/>col right<br/>col right<br/>col right<br/>col right<br/>col right<br/>col right<br/>
        col right<br/>col right<br/>col right<br/>col right<br/>col right<br/>col right<br/>col right<br/>
      </div>
    </div>
  </div>
  </div>
</div>

и css

html, body {
  height: 100%;
  margin: 0;
}
.row {

    margin: 0px;
}
.col {

    padding: 0px;
}

#my-container {
  height: 100%;
  padding: 0px;
}

#my-full-row {
    height: 100%;
}

#my-menu-col {
  height: 100%;
  width: 50px; 
  background-color: purple;
}

#my-title-row {
  background-color: red;
  height: 50px;
}

#my-row {
  background-color: blue;
  height: 100%;
}

#my-col-left {
  background-color: green;
  overflow-y: scroll;
}

#my-col-right {
  background-color: yellow;
  overflow-y: scroll;
}


#u { background-color: #337ab7; }

Ответы [ 3 ]

0 голосов
/ 01 мая 2020

overflow-y: auto; покажет полосу только при переполнении.

и вам нужно ограничить высоту вашего div .. поэтому эти 2 правила были изменены: 

#my-col-left {
  background-color: green;
  overflow-y: auto;
  height: 100vh;
}

#my-col-right {
  background-color: yellow;
  overflow-y: auto;
  height: 100vh;
}

вот результат: https://jsfiddle.net/o0czt2ua/

0 голосов
/ 01 мая 2020

я добавил высоту: 100vh к этим двум идентификаторам # my-col-left # my-col-right и overflow: скрыто для тела. скопируйте css в ваш файл, он будет работать. 

html, body {
  height: 100%;
  margin: 0;
  overflow:hidden; /*added*/
}
.row {

    margin: 0px;
}
.col {

    padding: 0px;
}

#my-container {
  height: 100%;
  padding: 0px;
}

#my-full-row {
    height: 100%;
}

#my-menu-col {
  height: 100%;
  width: 50px; 
  background-color: purple;
}

#my-title-row {
  background-color: red;
  height: 50px;
}

#my-row {
  background-color: blue;
  height: 100%;
}

#my-col-left {
  background-color: green;
  overflow-y: scroll;
  height:100vh;/*added*/
}

#my-col-right {
  background-color: yellow;
  overflow-y: scroll;
  height:100vh;/*added*/
}


#u { background-color: #337ab7; }
<div class="container-fluid" id="my-container">
  <div class="row" id="my-full-row">


  <div class="" id="my-menu-col">
    M
  </div>

  <div class="col">
    <div class="row" id="my-title-row">
      Title row
    </div>
    <div class="row" id="my-row">
      <div class="col-sm-2" id="my-col-left">
        col left<br/>col left<br/>col left<br/>col left<br/>col left<br/>col left<br/>col left<br/>col left<br/>
        col left<br/>col left<br/>col left<br/>col left<br/>col left<br/>col left<br/>col left<br/>col left<br/>
        col left<br/>col left<br/>col left<br/>col left<br/>col left<br/>col left<br/>col left<br/>col left<br/>        
      </div>
      <div class="col-sm-10" id="my-col-right">
        col right<br/>col right<br/>col right<br/>col right<br/>col right<br/>col right<br/>col right<br/>
        col right<br/>col right<br/>col right<br/>col right<br/>col right<br/>col right<br/>col right<br/>
        col right<br/>col right<br/>col right<br/>col right<br/>col right<br/>col right<br/>col right<br/>
      </div>
    </div>
  </div>
  </div>
</div>
0 голосов
/ 01 мая 2020

У вас много повторений CSS, поэтому я бы порекомендовал немного почистить. Если я понимаю, что вы хотите, удаление height: 100%; из #my-row предотвращает прокрутку, когда область просмотра достаточно высока для содержимого.

Я также добавил это: 

#my-col-left, #my-col-right {
  height: 100%;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...