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>
Related
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.
I have a jumbotron at the top of my site, with a background image which resizes fine when I resize the browser window.
I have another background image that lays on top of the jumbotron background image. I have been setting different breakpoints for that overlaying image using position: relative; and passing the appropriate pixel amount to top, left, width and height styles.
The reason I do this, is because the overlaying image needs to decrease as the web browser size decreases, and the reason I use top and left is because I want to have the bottom of the overlaying image line up with the bottom of the jumbotron background image at that breakpoint.
I know if I set the overlaying image to use a .make-sm-column(5) and the appropriate offset, it may work, but I am having trouble lining the bottom of the overlaying image to the bottom of the jumbotron background image.
Example html:
<div id="jumbotron">
<div id="jumbotron-man"></div>
</div>
The css just sets the background-image and position to relative, and for each breakpoint it sets the top, left, height, width of the image, I do not currently use .make-sm-column or offset for the overlay. There are other overlays and text divs on the jumbotron, but I thought just asking about this will give me push in the direction and allow me to apply the same to the other elements overlaying the jumbotron.
As seen in the image, you can see how I want it lined up
I feel like I am not taking advantage of bootstrap in this situation, any guidance is appreciated, thank you.
There are some different ways, a common way is to set position:relative; on the parent and position:absolute; on the child, to position the child at the bottom set bottom:0; for the child.
So:
CSS:
#jumbotron {
position: relative;
}
#jumbotron-man {
position: absolute;
bottom: 0;
}
HTML:
<div id="jumbotron">
<div id="jumbotron-man"></div>
</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
I'm stuck with this rather odd problem that occurs whenever I place an image in one of my fluid grid layout columns. When the width of the page is anywhere above 400px, the width of the page is calculated properly. But when I shrink it down to below 400px wide, then the page stays the same width and you have to scroll left and right.
The problem even persists when I set the width image's container to, say, 50%. The image and its container shrinks, but the div that contains the image container still expands beyond the width of the screen. If I set display:none; on the image, or remove it altogether, the problem goes away and the width of the page fits the screen correctly.
Thanks!
The page: http://cdhinternational.org/index3.html I'm having trouble with the image at the bottom. (The Responsive Design Mode in Firefox is a great way to reproduce the problem. Just set it to 320x480px.)
You need to set the width of your content-container.
#content-container { width: 100%; } should do.
P.S. any particular reason the content-container is floated left? If you remove float: left; from the content-container that should also do.
I've looked for an answer and found some but they look to only be for divs with background colours, not background images with corners etc. My example is at (removed)
I want the menu and the "page" to be the same height 100% of the time. No matter which one is larger ie if the page has more content the menu has to stretch and vice versa.
As you can see, the shadows etc for the background images are divs absolutely positioned within the respective divs and then z-indexed lower than the container...
Am I going about this the wrong way? Insight would be very helpful, thanks in advance!
Set the div's height property to 100% of it's parent, which will be the body of the document or a containing div. Then simply set margins for the top and bottom.
#menuDiv {
height: 100%;
margin: 100px 0 25px 0;
}
Same for the content div. The div's size properties won't change for the background image. Although it might be better for you to put both divs in a containing div with both children (menu and content) set to 100% of it's parent, then set a minimum height on the containing div which is equal to the height of the menu. If you don't do this and the content div is smaller it'd look ugly.