I am using the Bootstrap .container class to center content on the screen and fix it's width at something suitable for the viewport. That's fine, however I now want to wrap that container in a single, centered column that has 100% height. I want the height to be at least 100% of the viewport. It should expand when the content does not fix on a single screen.
I have looked at general solutions that set the height of the html and body element to be at least the height of the screen, but these do not seem to work in Bootstrap. I suspect it has something to do with box-sizing set to border-box.
Here is an example of the html:
<div class='my-col'>
<div class='container'>
<p>My content goes here</p>
</div>
</div
Use min-height: 100vh.
vh is a viewport unit: 1 vh is equal to 1% of the height of the display.
I don't know if this really help you. I can't put a bootstrap in this fiddle, I just don't know how to do that. So will you please do this on your own console, i did this trick to get my content 100% height.
here we go:
html{
margin:0;
height:100%;}
body{
display:flex;
flex-direction:column;
height:100%;
padding:0;
margin:0;
background:yellow;
}
header{
flex:0 1 80px;
background:#ddd;
}
section#containerWrap{
flex:1 1 auto;
height:100%;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
background:#ccc;
position:relative;
}
section#containerWrap .container{
height:100%;}
footer{
flex:0 1 40px;
background:#999;
}
<body>
<header>header is about nav and logo</header>
<section id="containerWrap">
<div class="container">
<p>very long content should be flexible in here</p>
<p>very long content should be flexible in here</p>
<p>very long content should be flexible in here</p>
</div>
</section>
<footer>the footer, website map, and more like contact us</footer>
</body>
it will set your footer absolutely in the bottom of the screen, you don't need to set the footer it self to position absolute or fixed what i did is, i stretch the container and take the rest of the height from header and footer.
maybe i can say it something like this
container height - (header height + footer height).
wish it will help you.
try this code for your problem
body,html{
height:100%;
}
.my-col{
height:100%;
background:green;
}
.container{
height:100%;
background:gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.css" />
<div class='my-col'>
<div class='container'>
<p>My content goes here</p>
</div>
</div
have a look on codepen also
http://codepen.io/anon/pen/jyObgP#anon-login
Related
I have a container div and a content div.
markup:
<div id="container">
<div id="content">
<pre>
some <br/>
content <br/> of variable height.
</pre>
</div>
</div>
css:
#container {display:table; border:solid red 2px; width:400px; height:500px; background-color:#aaa;}
#content {display:table-cell; height:200px; width:200px; vertical-align:middle; background-color:#444}
I want to vertically align the content div, but not have it take the complete height of the container div.
Now I see other solutions for this, the ones that use 3 div's - outer, middle, inner- I don't want to do that- just 2 divs.
While the above thing works- the height of the content div is ignored- possibly because of the table-cell display value, and it fills the entire container div. How to rectify this??
Remove the display:table-cell css from your #content id css selector, then the 200 height is respected. And you have a typo in your height: 200px width:200px there is no semi-colon separating the two values, so the width is not getting applied.
#container {
display:table;
border:solid red 2px;
width:400px;
height:500px;
background-color:#aaa;
}
#content {
/*display:table-cell;*/
height:200px;
width:200px;
vertical-align:middle;
background-color:#444
}
<div id="container">
<div id="content"> <pre>
some <br/>
content <br/> of variable height.
</pre>
</div>
</div>
I have some floated divs in a wrapper, they should be side buy side and a fixed width. However as together the child divs are wider than the parent div this has been set to overflow:hidden;
My problem is I have to set the width of the parent div to accommodate the combined width of the child divs otherwise they are pushed onto a new line by the lack of available width.
I would like to not have to set the width of the wrapper div if possible as the child divs will be added dynamically.
Css:
.shell{
width:900px;
}
.wrap{
overflow:hidden;
height:120px;
margin-top:35px;
width:1000px;
}
.cont{
width:500px;
float:left;
position: relative;
}
Html:
<div class="shell">
<div class="wrap">
<div class="cont">
</div>
<div class="cont">
</div>
</div>
</div>
Note: The relative:position; must be kept for other reasons.
.wrap{
overflow:hidden;
height:120px;
margin-top:35px;
min-width:1000px;
width:auto;
}
if you want to view them side by side , then you should consider using inline-block
that is why we use min-width , just to initiate a width
I have a three-parts layout: header, content and footer. I am very well familiar with the absolute positioning technique; I use it a lot when I want the content div to extend to 100% of available height.
In this case, my problem is that I don't know in advance the height of the footer, it is dynamic based on its own content, which has an unknown number of lines (typically between 1 to 3 lines).
I want the main content div to grab 100% of available height, after accounting for the height of the header (which is fixed, so it's a no-brainer) and for the height of the footer therefore I can't use absolute positioning technique here.
I have a solution with involves javascript, but I am trying to find a css-only solution. Ideally, it should be a cross-browser solution (IE8, IE9, chrome, firefox and Safari).
Try this
<!doctype html>
<html>
<body>
<style>
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
background:#6cf;
}
</style>
<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div>
</div>
</body>
</html>
I have 3 divs vertically. The first should have 100% width, the second should have an image with width 283px, and third div should have 100% width.
Does anyone know how to position the image div in the middle of two others divs 100%?
I've tried this, but dont works for me
<div class="content">
<div class="first">1</div>
<div class="third">3</div>
<div class="second">2</div>
</div>
.first{
width:100%;
float:left;
background:yellow;
}
.third{
width:100%
float:right;
background:pink;
}
.second{
width:283px;
overflow:hidden;
background:blue;
}enter code here
If your intention is to position the divs next to each other horizontally than you can't have any of them set to a width of 100% as the total of all elements next to each other can only total 100%.
If your website will be fixed width than your easiest solution would be to set the width of the left and right div in pixels to the (width of the site - 283) / 2. Then they would float next to each other. You could also do this with %.
However if your site is fluid width, then you would need to work out a percentage for all 3 divs i.e 33% each but this would mean the middle won't be exactly 283px.
The only way I can think to make this work exactly as you want would be to use Javascript to resize the elements after the page load which could then get the browser dimensions and work it all out.
Having read it a few times i think i get what you want to do.
You want he middle div to be centred between the two other divs.
you need to give the div a class something like this:
.middlediv
{
width: 283px;
margin-left: auto;
margin-right: auto;
}
which can also be written like this:
.middlediv
{
width: 283px;
margin: 0px auto;
}
Your question isn't clear, so I've done both possible interpretations: http://jsfiddle.net/EbBzY/
HTML
<h1>Option 1</h1>
<div class="main">
<div class="content">
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
</div>
</div>
<h1>Option 2</h1>
<div class="content">
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
</div>
CSS
.main{
display:table;
width:100%;
margin-bottom:100px;
}
.main .content{
display:table-row;
}
.main .content div{
display:table-cell;
}
.first{
background:yellow;
}
.third{
background:pink;
}
.second{
background:blue;
width:283px;
margin:auto;
}
I want to add 100% width to my website. The problem is that If I do so, the design and the size of the contents changes with the change of the browser size. I want to make the contents inside the webpage constants although I give the size of the boxes in %
Try to fix min-width with % width of body, this will resize but will not let elements to get crushed if browser is thinned.
<html>
<head>
<style type="text/css">
body,html{ margin:0; padding:0; width:100%; min-width:800px;}
#container{
margin:0 auto;
}
#header, #content, #footer{
min-width:700px;
margin:0 auto;
}
div{
min-height:40px;
margin:10px;
background-color:red;
}
?
</style>
</head>
<body>
<div id="container">
container
<div id="header">header</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
</body>
</html>
Create a wrapper div with a fixed width, and then any element's width within it will be relative to that width.
eg
#wrapper {
width: 800px;
}
div {
width 80%; /*div will be 80% of 800px ie 640px*/
}
As I understand your question you can put contents in fixed width divs and put those inside of variable width div(%) and position them with margin or padding
You can also specify maximum-width/height for the components which you feel as should not be re-sized.