How do you make a left DIV the same height as a large right DIV?

Asked

Viewed 48 times

-1

I have a page of type one-page with 3 columns. The central column has the content of the site. And the right and left columns need to repeat an image vertically throughout the page height.

<body id="home" class="homepage">
<div class="container col-sm-1 col-md-1" style="background-image:url('http://placehold.it/30x30');
    background-repeat:repeat-y;">
    </div>

    <div class="container col-sm-10 col-md-10">Conteúdo Enorme</div>

    <div class="container col-sm-1 col-md-1" style="background-image:url('http://placehold.it/30x30')>
    </div>
</div>
</body>

How I make the lateral columns follow the height of the central column, without losing the responsiveness?

html css twitter-bootstrap height

2 answers

0

You can set the image as background <body> thus does not need the lateral communes, just define the width of the div with the content as being smaller than the page type 70vw and margin: auto, so she goes to the horizontal center of the page.

  • In this case it would be very difficult to match the width of the side image... the crazy idea I was asked to perform is to put this pattern on the sides (see: https://i.pinimg.com/Originals/07/0a/ea/070aea5a0cab75ccf767a0a1f233b81e.jpg) a single column on each side of the site, repeating vertically only, not horizontally.

0

Your code has several "problems" because your Grid is far from what the official documentation says....

First you have to put your content within a single container, after the son gave container must be a .ROW and so you share the colunas col- of your grid in 1-10-1

Then just put a class for example in the right and left column and in them put your background-image. This way independent of the contents the BG of the side columns will always be the size of the middle column

Take an example

.bg {
    background-image: url(https://png.pngtree.com/element_pic/00/16/07/115783678b832b9.jpg);
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" />

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-1 col-md-1 bg"></div>

        <div class="col-sm-10 col-md-10">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus et perspiciatis molestias itaque voluptatum quo cumque laudantium autem ullam beatae. Illo, voluptates? Voluptatem exercitationem, qui iste suscipit vero nesciunt sunt excepturi ipsam nam ullam deserunt labore vitae, est veritatis voluptatum adipisci fuga molestias nostrum sit quod molestiae magni animi! Numquam nisi reiciendis dignissimos! At, delectus labore amet fugit tenetur, sapiente eum animi cum ipsam voluptatum, quibusdam distinctio eius consequatur inventore aspernatur ut soluta numquam magni pariatur error. Maxime dolorum maiores magni, facilis voluptas eum assumenda nihil tempore voluptates dolore odio rerum consequatur excepturi praesentium ut necessitatibus officia iste ullam ipsum animi? Distinctio ducimus reiciendis doloremque ex id? Sed nostrum consequuntur libero laudantium? Hic explicabo ex maxime quasi delectus distinctio. Culpa ipsam tempora esse saepe voluptatem nesciunt, officiis ipsa dignissimos, officia porro architecto reprehenderit molestias possimus nulla velit temporibus labore dolorum. Deserunt, animi pariatur tempora, eos reiciendis labore consequatur aut, similique aspernatur at commodi incidunt quos facilis quasi. Impedit nemo eos cum est labore inventore iusto error odit ratione corporis amet corrupti consectetur molestiae commodi libero nostrum dolores, fugiat, eum ex officiis. Labore consectetur fuga blanditiis nihil, quasi quo incidunt ipsam. Odit aliquid perspiciatis minus esse beatae rerum ipsa maiores? Dolore, amet quidem, tempore modi eaque odio numquam laboriosam quisquam vitae accusantium ducimus maxime dolorem mollitia, soluta quibusdam! Recusandae quam excepturi impedit perspiciatis natus placeat officia officiis saepe? Accusantium rerum distinctio error in minima accusamus impedit possimus, deserunt ad rem assumenda a fuga magnam at nihil numquam ipsum iusto harum soluta recusandae commodi? Beatae impedit ducimus corporis quisquam deserunt incidunt accusantium animi, minima reiciendis veniam vero doloribus ipsam pariatur qui, neque aspernatur, culpa accusamus laborum. Exercitationem id, aliquam possimus accusantium animi molestiae dignissimos veritatis facilis soluta repellat ab adipisci placeat! Dolore, minima laudantium tempore optio inventore ipsam voluptatibus modi ratione fugiat recusandae amet esse! Alias officiis rem provident corrupti quae quia doloremque veniam voluptatem deleniti placeat eveniet 
        </div>

        <div class="col-sm-1 col-md-1 bg"></div>
    </div>
</div>

  • Thanks friend! I will test and soon give you a feedback.

  • @Still no problem, young man, if you have any questions just say the word.

Browser other questions tagged html css twitter-bootstrap height

You are not signed in. Login or sign up in order to post.