Two in one
What will happen if you combine the two problems associated with the layout?
We all deep down hope that the problems that arise when solving these problems will develop. However, practice shows that they are multiplied.
If you are interested in how to use only divs and valid CSS to make a page that “casts a shadow” (left and right) and at the same time takes up at least the screen height, welcome to the cat!
First, remember how the shadows usually do. There is such an old proven method of "onion peel". We do not want our shadows to be highlighted with a mouse? Therefore, they must be in the background quality, and since it is impossible to set the background images for the left edge and for the right edge separately, you have to put several divs into each other.
Now about the height. To make a layer as high as the screen, it is necessary that it and all elements in which it is nested (starting with body or even html) have height: 100% . But this does not quite suit us, because we need 100% to be the minimum height. To do this, there is such a min-height hack : 100%; height: auto! important; height: 100%; “But when we combine the onion peel with this hack, it turns out garbage, because we have one shadow stretched to the height of the browser window, and the other to the height of the content.
Together with a friend raceoffer, we sat over it the whole night, but, as they say, morning is wiser than evening. Although, when it was already dawn (but before we slept), we thought we had found a solution. These background images made a static background. And everything was fine until horizontal scrolling appeared!
')
Well, now, in fact, the solution that we found.
To make it clearer to you how it looks in action, I made two examples: stretching the height of the content and stretching the height of the screen
And now a little about how it works. First, we create containers with a height of 100% of the window and put there one narrow column with the style “float: right; margin-right: -5px. After it we place the container containing all the content. So we got a shadow that looks right. Now a little trick, so that the footer is placed where it is needed, set before him (otherwise everything will go in IE).
Checked the work of this method in Firefox 2,3 Opera 9.27, 9.5, IE 6.7, Safari for Win
We all deep down hope that the problems that arise when solving these problems will develop. However, practice shows that they are multiplied.
If you are interested in how to use only divs and valid CSS to make a page that “casts a shadow” (left and right) and at the same time takes up at least the screen height, welcome to the cat!
First, remember how the shadows usually do. There is such an old proven method of "onion peel". We do not want our shadows to be highlighted with a mouse? Therefore, they must be in the background quality, and since it is impossible to set the background images for the left edge and for the right edge separately, you have to put several divs into each other.
Now about the height. To make a layer as high as the screen, it is necessary that it and all elements in which it is nested (starting with body or even html) have height: 100% . But this does not quite suit us, because we need 100% to be the minimum height. To do this, there is such a min-height hack : 100%; height: auto! important; height: 100%; “But when we combine the onion peel with this hack, it turns out garbage, because we have one shadow stretched to the height of the browser window, and the other to the height of the content.
Together with a friend raceoffer, we sat over it the whole night, but, as they say, morning is wiser than evening. Although, when it was already dawn (but before we slept), we thought we had found a solution. These background images made a static background. And everything was fine until horizontal scrolling appeared!
')
Well, now, in fact, the solution that we found.
To make it clearer to you how it looks in action, I made two examples: stretching the height of the content and stretching the height of the screen
And now a little about how it works. First, we create containers with a height of 100% of the window and put there one narrow column with the style “float: right; margin-right: -5px. After it we place the container containing all the content. So we got a shadow that looks right. Now a little trick, so that the footer is placed where it is needed, set before him (otherwise everything will go in IE).
Checked the work of this method in Firefox 2,3 Opera 9.27, 9.5, IE 6.7, Safari for Win
Source: https://habr.com/ru/post/29217/
All Articles