Crossbrowser adaptive pattern, which version uses?

All healthy, happy.

Long used this method, but it is old, who uses a more modern and comfortable, tell me and show, I want something modern to use on the flake for example.

The adaptive variant, where the bottom of the site is pinned to the bottom of the website.

My version: the method is clumsy, and where necessary padding to prescribe for example the bottom of the container to the context does not fit if content a lot of, well the top is identically the same.
https://jsfiddle.net/t0xn63wz/
April 3rd 20 at 18:43
4 answers
April 3rd 20 at 18:45
Solution
Use flex.
body {
 display: flex;
 flex-direction: column;
 min-height: 100vh;
}

main {
 flex: 1 0 auto;
 background: red;
}

footer {
 flex: 0 0 auto;
 background: blue;
 height: 200px;
}
so this variant, it is divided into the bottom and center I understand, and the top? any maybe I understood correctly. - Geovanny_Be commented on April 3rd 20 at 18:48
@Geovanny_Be, well, add header and duplicate the styles, the height is not necessary to specify that stretched as far as necessary content. - Isaac_Altenwerth commented on April 3rd 20 at 18:51
@Isaac_Altenwerth, made an example, center on center placed vertically and horizontally.

The problem with the adaptation horizontally, why not compressed, and the scroll appears.
https://jsfiddle.net/9hofx4nm/1/ - Geovanny_Be commented on April 3rd 20 at 18:54
And why padding: 0 50px 0 50px; fails, occupy, I have menucha comes over and goes over the edge.

I usually put the sides of the indentation, so the site looked fine when the screen is small and if all of the blocks and the text is pressed and there is no indentation it is not pretty, but with this odd do not work fine margins. - Geovanny_Be commented on April 3rd 20 at 18:57
Here this garbage goes:
5dfe537bb59ab614711744.jpeg - Geovanny_Be commented on April 3rd 20 at 19:00
@Geovanny_Beoffer a job for you to do? - Isaac_Altenwerth commented on April 3rd 20 at 19:03
@Isaac_Altenwerth, no, ask how to be indented. - Geovanny_Be commented on April 3rd 20 at 19:06
April 3rd 20 at 18:47
you can say all the methods are there ) - Geovanny_Be commented on April 3rd 20 at 18:50
@Geovanny_Be, it is. Well I tried when I was looking for) - jonas commented on April 3rd 20 at 18:53
@Geovanny_Be, you can even choose a decision when you're tired of teaming up with another option... - jonas commented on April 3rd 20 at 18:56
April 3rd 20 at 18:49
modern

grid

Read this article came)
grid
And then a customer came and asked, why not work in IE? Do not order, it is necessary that worked in IE... - Oral66 commented on April 3rd 20 at 18:52
@Oral66, ahaha ) Yes, maybe )) - Geovanny_Be commented on April 3rd 20 at 18:55
It is necessary that the method supported by most browsers. - Geovanny_Be commented on April 3rd 20 at 18:58
@Geovanny_Becan footer do to move beyond the screen or make the body 90vh - wyman97 commented on April 3rd 20 at 19:01
April 3rd 20 at 18:51
Something can not so understood, but it seems it's pretty simple https://codepen.io/angryyum/pen/bGNqEbV
about good option for the main page, where the content in the middle, on the left, the logo at the top, right sections, and the bottom contacts.

the type of this option.
5dfb8f080a548458938702.jpeg - Geovanny_Be commented on April 3rd 20 at 18:54
Well happy with the idle task. My advice to you is brush up on a bit of a flake - because it is the base) - virginia.West commented on April 3rd 20 at 18:57
@virginia.West, know that simple, no hem odd is not pressed to the bottom ! put yourself and even out the bottom, making the scroll. - Geovanny_Be commented on April 3rd 20 at 19:00
And it was all done. without to scroll. - Geovanny_Be commented on April 3rd 20 at 19:03
@Geovanny_Be, has added 3 lines which is fixed. - virginia.West commented on April 3rd 20 at 19:06
Still there is a problem with this method, first tupil thought where adaptation.
here's a working example: https://jsfiddle.net/5pdt2q6L/2/

header - not a full-length max-width: 1200px;
it is seen that all compressed content.

and I usually did and it worked, now need to add max-
width: 1200px;
min-width: 270px;

if you remove:
in .w{} then everything is OK.
display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
- Geovanny_Be commented on April 3rd 20 at 19:09

Find more questions by tags CSSHTML