This question already has answers here:
CSS - how to overflow from div to full width of screen
(3 answers)
Closed 4 years ago.
Let me give an example of my problem: I'm working with magento (just explaining) and i want to make a full-width banner. Perhaps, Magento by default place a
class="container"
div that limit the width for the custom grid they have. So, i don't know what to do to get the full-width banner when it's placed (forced by Magento structure) inside a div with max-width setting.
In fact, i did some "margin" and "padding" configuration, but i'm trying to avoid this exaustive path just for one banner.
Here is my example: https://jsfiddle.net/mq4sr8d8/1/
<div class="background-size"><div class="outside"><div class="inside"></div></div></div>
You can achieve what you want in - if the outside div is centred, you need the following styles for inside:
.inside {
background-color: #ababab;
width: 100vw; /* make as wide as viewport */
margin-left: 50%; /* move it 50% right width of container */
transform: translateX(-50%); /* move it 50% left width of itself (to make it start at beggining of screen */
height: 100%;
}
Centred container fiddle
If your container is left aligned, just add the width:100vw
Left container fiddle
Related
This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
Closed 2 years ago.
The div for the red box and the div for the green and purple boxes are both set to the same max-width of 75rem. I'm stumped on how the red box is displaying a max-width of nearly 1250px when stretched on a wide monitor.
JSFiddle
I'm applying this helper class to both divs.
.wrapper {
margin: auto;
max-width: 75rem;
}
Add CSS box-sizing:border-box to your .hero will solve the issue.
What happens
As .hero has padding 20px on left and right. Your whole div becomes 75rem + 40px
box-sizing:border-box makes sure that padding should be included in width. So your div's actual width will become 75rem - 40px
More on box sizing: https://www.w3schools.com/css/css3_box-sizing.asp
This question already has answers here:
Fit div size to background image
(3 answers)
Size the DIV to the size of the background image
(3 answers)
Closed 4 years ago.
I have a div with some content and want to have a background image. However, I want to be able to see the full height of the image. I could add a load of padding to the top and bottom of the content but I want this to be dynamic for all screen sizes.
div{
background-image:url(https://via.placeholder.com/350x150);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
/* height 100%; */
text-align:center;
}
<div>
Some content
</div>
I know I could also just add an <img> tag to the <div> but there is a lot of content in this that would then have to be floated around to overlay the image.
I don't mind using JS/jQuery to resolve this.
To make something fit the full height of the screen instead of using 100% as you would for width, using vh, so in your case:
height: 100vh;
This will work dynamically depending on the users screen dimensions, you can read more about this as well as see examples here.
This question already has answers here:
Can't scroll to top of flex item that is overflowing container
(12 answers)
Closed 6 years ago.
In this example, as soon as the browser window height drops below 400px, the image is no longer centered in the scrollable area.
html {
height: 100%;
}
body {
height: 100%;
display: flex;
align-items: center;
margin: 0;
padding: 0;
}
#content {
height: 400px;
display: flex;
align-items: center;
}
<div id="content">
<img src="http://placehold.it/300x300">
</div>
It works as soon as I unset the height property of the html or of the body or of both.
Still, I want to understand why centering in this specific example fails. Does it have something to do with the nested flexboxes? Or is there something problematic with setting the height of both, html and body, to 100%? Is it a bug or something browser related?
It's similar to margin: 0 auto (in conjunction with position: relative) for horizontal centering: As long as the container is wider than the centered child, the child will be centered. But as soon as the container (or the body/viewport) is narrower than the child, the child will be aligned left and a scrollbar will appear. That way it will always possible to see the whole child element - since it's larger than the container, that only is possible when scrolling is enabled.
In the situation you describe, the same happens with flexbox and vertical centering: If the parent container would be smaller (i.e. less high) than the child, and the child would be centered without a scrollbar, you wouldn't be able to see it's top and bottom part (which can be important for example if it's a form where you have to fill in text fields etc.), and you wouldn't be able to scroll to see those hidden parts. So in this situation (child higher than parent with child vertically centered in flex container), the child will be put at the top of the parent and you will be able to scroll down, which is good to either read/see the whole content or see/fill in the whole form in case of forms.
This question already has answers here:
How to make a div 100% height of the browser window
(40 answers)
Closed 8 years ago.
I'm using Bootstrap for my responsive layout. Within the .container I want to have a div which isn't limited to the width of the container. Furthermore I want it to be stretched over the full body. I could place the div outside the .container but I don't want to mess around with absolute positioning or similar.
How can I make a div 100% to the body, even if the parent div is not filling the whole width of the body.
.div {
width: 100%;
height: 6px;
}
Thanks
Use class .container-fluid instead of .container. Bootstrap provide .container-fluid class to make full screen div.
If you are specific to some requirement please share code as well to understand better.
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 8 years ago.
When you have images with
width: 100%;
height: auto;
contained in a box, depending on the aspect ratio(I think) of the image and the dimensions of the box it will not always populate the entire height of the box.
You don't really notice this when there is just one row of these images side by side but if they go onto a new row you can see a few pixels space between the top and bottom row. The boxes are touching but the images in the box are not taking up all of the height of the box.
I can't set a fixed height and width on these boxes/images as they are supposed to be fluid.
I'd like to get a solution to this without Javascript if possible but if that's the only solution I will take it.
JSFIDDLE
http://jsfiddle.net/BeYqu/
You can set display:block to images
img {
width: 100%;
height: auto;
display:block; /* add this */
}
Hope you need this.
Demo