All geek questions in one place

Place the DIV in a new column when end of page is reached

I have some div on the page. How can I make DIVs create a new column on the right when the bottom of the page is reached. Therefore, I have small fixed DIV heights with images inside them. After each DIV there is a line, and then the next div, etc. On smaller displays, the screen requires scrolling to view the DIV. So I added overflow: hiddento the body to disable scrolling. Now the DIVs at the bottom are cut out, so I want the DIV cut out to create a new column on the right.

Example picture .

body {
overflow: hidden;}
#icon {
background: #000;
color:#fff;
height:50px;
width:50px;
}
<body>
<div id=icon>1</div><br>
<div id=icon>2</div><br>
<div id=icon>3</div><br>
<div id=icon>4</div><br>
<div id=icon>5</div><br>
<div id=icon>6</div><br>
<div id=icon>7</div><br>
<div id=icon>8</div><br>
<div id=icon>9</div>
Run codeHide result
+4
source share
2 answers

polyfill. .

flexboxes. Flexboxes .

divs div ( section) - flexbox:

body {
  overflow: hidden;}

.wrap {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100vh; /*the height will need to be customized*/
  width: 50px;
}

#icon {
  background: #000;
  color:#fff;
  height:50px;
  width:50px;
  margin-left: 10px;
}
<section class='wrap'>
    <div id=icon>1</div><br>
    <div id=icon>2</div><br>
    <div id=icon>3</div><br>
    <div id=icon>4</div><br>
    <div id=icon>5</div><br>
    <div id=icon>6</div><br>
    <div id=icon>7</div><br>
    <div id=icon>8</div><br>
    <div id=icon>9</div>
</section>
Hide result

. , height: 100%, .

: columns flexboxes , , . , Bootstrap SpaceBase ( SASS-).

+3

@samuel-denty CSS?

jsfiddle: https://jsfiddle.net/zk7578vj/
class (.) id (#) css, :

body {
    overflow: hidden;
    -webkit-columns: 50px 2;
    -moz-columns: 50px 2;
    columns: 50px 2;
}
.icon {
    background: #000;
    color:#fff;
    height:50px;
    width:50px;
}


<body>
    <div class="icon">1</div><br>
    <div class="icon">2</div><br>
    <div class="icon">3</div><br>
    <div class="icon">4</div><br>
    <div class="icon">5</div><br>
    <div class="icon">6</div><br>
    <div class="icon">7</div><br>
    <div class="icon">8</div><br>
    <div class="icon">9</div>
</body>
+3

Source: https://habr.com/ru/post/1650212/

More articles:


All Articles