Css прокручивается внутри контейнера - PullRequest
Новая
       4

Css прокручивается внутри контейнера

0 голосов
/ 24 июня 2018

Создание примера приложения. Где мне нужно было иметь полосу прокрутки, когда дочерних элементов больше. Горизонтальная полоса прокрутки не появляется, вместо этого элементы дочерних элементов падают, а не идут одной горизонтальной линией.Кто-нибудь может предоставить какое-либо решение для этого с помощью CSS без использования JQuery. 

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<style>
.main-div
{
border:2px solid black;
height:300px;
width:300px;
overflow-x: scroll;
overflow-y: scroll;
}

.child-div
{
  width:90px;
  border:1px solid black;
  float:left;
}

</style>
</head>
<body style="height:1000px;">

<div class="main-div" >

<div class="child-div" >Header1</div>
<div class="child-div" >Header2</div>
<div class="child-div" >Header3</div>
<div class="child-div" >Header4</div>

 </div>

</body>
</html>

1 Ответ

0 голосов
/ 24 июня 2018

Это для вертикальной прокрутки

Поместите это под свой тег тела 

 <div class="container">
    <div class="main-div" >

    <div class="child-div" >Header1</div>
    <div class="child-div" >Header2</div>
    <div class="child-div" >Header3</div>
    <div class="child-div" >Header4</div>

   </div>
 </div>

И это под тегом стиля 

main-div
{
  max-height:200px;
  width:100%;
  overflow-x: hidden;
  overflow-y: scroll;
}

.child-div
{
  width:100%;
  border:1px solid black;
  height:70px;
  position: relative;
}

рабочая скрипка

https://jsfiddle.net/nm7s4ahw/3/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...