I'm trying to create a css background that is 100% height at all times regardless of content height, and when the content is long enough to create a scrollbar, the background color remains as you scroll.
No matter what combination of min-height & height I try I can't seem to get this to work properly.
When I use Tailwind's h-screen class it fills to the bottom of the page when the content is smaller than the viewport, but when there's a scrollbar the background disappears on the scrolled section.
I've tried various combations of h-full and min-height: 100%, on parent divs/body/html, but nothing seems to work.
Here's a working example:
https://jsfiddle.net/t30wo6uk/3/
Here's screenshots of the two problems demonstrated:
h-screen works when there's no scrollbar, but once there's a scroll it cuts off:
If I remove h-screen or try combinations of height: 100% I get the inverse problem where it sticks when scrolling, but if the content is too small for the viewport the background color doesn't take up the full height of the page.
In my real app, I have a navigation header, then this content section that I want to take up the full height, and then a sticky footer at the bottom. The sticky footer is why I have those additional divs around my content div.
Add min-h-screen to the body. that will make the body at least as heigh as the viewport. Then apply the background-color to the body:
<body class="min-h-screen bg-gray-50">
{... content ...}
</body>
if the content is smaller then the viewport, min-h-screen will size the body to cover the entire viewport. If the content is larger, the content will determine the height. As the background-color is applied to the body, it will always cover the entire website.
Related
I want to make element scrollable if it's content is becoming too large to fit in parent's max-height. The problem is that it overflows parent instead of adding scrollbar.
I know that providing height or max-height in pixels to element would fix the issue but I cannot do that because the height of the element is not known.
Link to the code: https://codesandbox.io/s/scrollable-height-ewfbmo?file=/src/App.js
(I want purple section to be scrollable)
So to scroll the purple region:
Just add overflow: auto to the .body class (the parent of the purple region)
I forked your code-sandbox:
https://codesandbox.io/s/scrollable-height-forked-9hvrpy?file=/src/styles.css
I have a blog with some content in it (divs). When i click a div a lightbox-like article appears. It has a transparent black container and on the middle an article. The container has position absolute , width and height auto top 0 and z-index over all content beneath
Its all ok until i resize the window. The the content of the body, the one underneath the article, goes beneath it. i want to make the container resize and stretch to cover that content too. And also to be able to scroll. Help please.
You can set the height and width of the box using vh and vw units which are set in terms of the height and width of the window. http://www.w3schools.com/cssref/css_units.asp
I'm creating a simple one-page layout in Bootstrap, however I'm struggling with the background color of a div on a large screen and on a mobile. When on a large screen, the size of the div is 100vw wide and 100vh high - it's all fine. The problem is when I scale down the viewport, the div doesn't have the desired color underneath all it's contents, the contents overflow into the second div underneath the first one.
How can I make the div have always one color underneath all it's contents no matter what the viewport size is? (width or height of 100% did not help really, there were borders on sides).
Thanks
You mean just add a background color to the div?
CSS
.my__div {
background: red; // add background color
}
HTML
<div class="my__div">Some content here</div>
There is a layout with central block "page" that has left, right and bottom background decorations (the light green plants on green background).
Example page
The problem is with the Bottom decoration, that is an empty bottom block, that is intended only to show its background image.
In order to be visible it must have height defined, however this height extends whole body height, and the window always scrollable to the down of the Bottom decoration block
You can change the "page" block height to something high, like 1000px or more to see the problem.
I'd like that full height bottom decoration will be seen only on short pages, where there's a lot of space beneath the page (like on initioal view). And on the long pages there should remain minimal gap of 20px height.
Shortly, it must only be visible on the remaining space, not extend the page by it's own height
I'm sure it is possible, but I'm stuck
Thanks
Found solution, simple fix
.wrapper {overflow: hidden; min-width: 1000px; }
Here's the result:
http://62.90.136.69/resultbottomdecor.html
Thanks
Demo
I've got a page with three sections that are 100% width and 100% height of the body with the exception of one section which is 200% the width of the body. On this section I'd like to be able to scroll horizontally to see the rest of the div, but I don't want the rest of the sections to have white space to the right of them as they currently do. If I set body{ overflow-x:hidden;} I can't scroll horizontally on the wider div. Any suggestions?
You need to encase the width:200%; div inside a container that has 100% width, so that it stays within the body, then set the container to overflow-x:auto;
Here is a jsFiddle to show what i mean.