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.
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:
Bootstrap 3 two columns full height
(19 answers)
How can I make Bootstrap columns all the same height?
(34 answers)
Closed 4 years ago.
I'm trying to set 100% of height to a HTML element.
On mobile, this div will go under the .div_left div, and the floating will be cleared.
I have these divs on my theme:
<div class="col-md-7 div_left"></div>
<div class="col-md-5 div_right"></div>
<div class="clearfix"></div>
I give them this css: (global bootstrap.css also included)
.div_left{ background:#fff; padding:40px;}
.div_right{ background:#ccc; padding:40px; height:100%;}
I tryed height:100vh; but that's not working, when the page has to many content, and I can scroll it vertically.
I also tryed min-height:100% but that didn't work. I can see the right div gray background, but that's just because it has padding.
Screenshot here
Second try:
Second image
Use min-height 100vh on the entire row...
.div_left{ background:#fff; padding:40px;}
.div_right{ background:#ccc; padding:40px;}
.mvh-100 {
min-height: 100vh;
}
https://www.codeply.com/go/vTYz8XE6cG
Desktop:
Mobile:
To use height:100%; a parent element should have a height: fixedHeight; because that it's not working for you.
https://www.w3schools.com/cssref/pr_dim_height.asp
% Defines the height in percent of the containing block
What you need to define is: 100% of what?
Here's more information about vh
Make a div 100% height of the browser window
There says:
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.
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
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
This question already has answers here:
Shrink-to-fit div and paragraph, based on image?
(6 answers)
Closed 8 years ago.
I have a div with an img and a p tag. I want the div to "shrink-wrap" the image and let the text organically wrap. However, I'm trying to do this with absolutely no javascript or constraints (ie width=300px / 50% etc) as my frame needs to be fluid.
Here's an example of something similar to what I have now: How can I make the outer dive match the size of the "Google" image without using fixed sizes or javascript?
http://jsfiddle.net/pVF74/
div {
border:1px solid black;
display:table;
width:1%;
}
http://jsfiddle.net/pVF74/2/
Add display: inline-block; to your div's class.
Example here http://jsfiddle.net/r9rLr/