I am trying to style the layout I will use as a template for my site and after a lot of reading I came up with this:
HTML:
<body>
<link rel="stylesheet" type="text/css" href="style/login.css" />
<div id="wrapper">
<div id="header">
Header
</div>
<div id="main">
Main
</div>
<div id="footer">
Footer
</div>
</div>
</body>
CSS:
html{
height: 100%;
}
body{
height: 100%;
}
#wrapper{
height: 100%;
}
#header{
height: 100px;
width: 100%;
}
#main{
height: 100%;
width: 100%;
}
#footer{
width: 100%;
height: 50px;
text-align: center;
position: relative;
}
Seems to be working but for some reason the wrapper and the main div seem to take the exact same height and this makes the page grow larger than the window and scrolling down is needed to see the footer.
I tried a lot of stuff to fix this including CSS absolute positioning and I have been using different browsers to test it.
Any Ideas?
it is because you set height:100%; in your #main set is to 100px or something else and it will work
I would really like to suggest you look at using something like bootstrap grid..
It will make you layout life so much easier across all browsers..
you just create a container with rows, and add divs with certain spans in them and it aligns everything perfect.
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<div class="container">
<div class="row" id="header">
</div>
<div class="row" id="body">
</div>
<div class="row" id="footer">
</div>
</div>
done :)
Further reading, takes like 10-15 min to figure out, then say goodbye to css nightmare..
http://www.revillwebdesign.com/twitter-bootstrap-tutorial/
http://twitter.github.io/bootstrap/scaffolding.html
First, put the link tag in the head section of the HTML document not in the body section.
As far as the css, I would not set heights on elements. Instead, only set the height if absolutely necessary. Let the content, padding and margin push the footer down to the appropriate height.
Related
I have been searching for a solution to this problem for almost two weeks now and I am still completely lost. I'm making a simple landing page and I don't want any scrolling. I need a header followed by a bootstrap row containing a paragraph and an image. Here is my ms paint example:
Simple enough right? Well I can not for the life of me figure out how to get that image to shrink to fit into that row. Here is what is happening to me now. Note: When you run the snippet on stackoverflow the window is to small. It is easier to see whats going on with the JSFiddle
body, html {
height: 100%;
width: 100%;
position: absolute;
margin: 0;
}
.content {
}
img {
height: 100%;
}
h1 {
background-color: white;
}
.banner {
height: 90%;
background-color: red;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="banner">
<h1>
Header
</h1>
<div class="row content">
<p> Hello World </p>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png">
</div>
</div>
Result
The part that throws me off is that the .row extends beyond it's parent container .banner. How do we force this to stay inside that red area?
I've messed with object-fit, flex-grow, flex-shrink, a flex-basis and none of these seem to create the desired behavior. I'm going insane trying to figure this problem out. Maybe flexbox is the wrong tool to use here? But I'm trying to take advantage of the bootstrap grid system's media queries. Thanks in advance for any help!
Note: The reason I have everything nested in the <div class=".banner"> is because I want the header to have a shadow onto the red background.
Edit
The root of my question is how do I get an image to fit inside of a row that only covers the red area?
You can update your code like below:
img {
/* this will make the image stretch and no overflow*/
height:0;
min-height:100%;
/**/
}
h1 {
background-color: white;
}
.banner {
height: 90vh;
background-color: red;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" >
<div class="banner d-flex flex-column"> <!-- flex container here -->
<h1>
Header
</h1>
<div class="d-flex content flex-grow-1 p-2"> <!-- flex-grow here to fill remaining space -->
<p> Hello World </p>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" class="ml-auto">
</div>
</div>
Try this:
<div class="banner">
<h1>Header</h1>
<div class="row content">
<div class="col-6">
<p> Hello World</p>
</div>
<div class="col-6">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png">
</div>
</div>
</div>
Working example: Codepen.
PS.: In my example I tried to follow your ms paint example.
Use display:block to the img & this also helps in responsiveness you can check the fiddle if you want to explore.
OR
You can also look into vh for height and vw for width that will take care of all screen resolutions.
fiddle to playaround.
body,
html {
height: 100%;
width: 100%;
position: absolute;
margin: 0;
}
.content {
height: 80%;
background-color: red;
display: flex;
justify-content: space-around;
}
img {
max-width: 100%;
max-height: 100%;
display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="header">
<h1>Header</h1>
</div>
<div class="row content">
<p> Hello World </p>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png">
</div>
I know that you can position an element fixed to the bottom using the following css code:
position: fixed;
bottom: 0;
left: 0;
The problem is that the bottom content on small devices overrides the content that is above it. Does anybody know if bootstrap provides a responsive solution for this issue?
You could always use !important. However you should probably be using a sticky footer. You need put the padding to the height of your footer on your body > .container. see here http://getbootstrap.com/examples/sticky-footer-navbar/.
.force-to-bottom {
position:absolute;
bottom: 5%;
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/latest/journal/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row force-to-bottom text-center">
<div class="col-xs-12">
<h1>
<button class="btn btn-primary" type="button">Save</button>
</h1>
</div>
</div>
</div>
Credits: https://stackoverflow.com/a/19072741/5192105
If I understood the problem correctly, you can resolve it by giving your body a margin-bottom to resolve this issue.
Suppose you have a fixed div that has a height of 200px.
Use:
body {
margin-bottom: 200px;
}
I warned you, I can be a little vague
Anyway, what I am after are those pages that fill the whole screen, but if you scroll down and you come to a different section ( some specific content or just a footer), it breaks away from the previous content by having a different background.
Sorry, if I sleep on it, I can maybe come up whith a better explanation and/or an example page.
Does that style have a name and how is it done? If it needs to be responsive?
thanks
Yes. It's simple to do. Setup like so, and customize to your heart's content.
<div id="header" class="container">
<div class="wrapper">
[...]
</div>
</div>
<div id="feature_area" class="container">
<div class="wrapper">
[...]
</div>
</div>
<div id="content" class="container">
<div class="wrapper">
[...]
</div>
</div>
<div id="footer" class="container">
<div class="wrapper">
[...]
</div>
</div>
CSS:
.container {
width: 100%;
text-align: center;
}
.wrapper {
margin: 0px auto;
width: 70%;
text-align: left;
}
The parent (container) <div>s will stretch to 100% page width. The child (wrapper) <div>s will stretch to 70% of their parents (or, you can set this to fixed pixel dimensions and change based upon screen dimensions) and will be centered. You apply decorative backgrounds to the parent .container like:
#header {
background: #ff0000;
}
#footer {
background: #000;
}
#content {
background: url(img/bg_pattern.gif);
}
#feature_area {
background: url(img/hero_feature_img.jpg) top center no-repeat;
}
Before I start, I know there are a lot of questions on here related to this, but I feel like the answers are seriously lacking. They at least aren't making sense to me, or they don't accomplish what I want. If you know of question with a solid solution that this duplicates, I simply missed it; I will delete this one.
If I have the following HTML...
<body>
<div id="header"></div>
<div id="content"></div>
</body>
How, in simple terms, can I make the header take up 50px of the view port's height and make the content portion fill the rest of the view port's height with no scrollbar? Ideally this would work in IE6 and without tables. Thanks!
this seems to work for me:
<html>
<body>
<div style="height:60px; position:fixed; width:100%;"></div>
<div style="height:100%; width:100%;">
<p style="padding-top:60px;">hola</p>
</div>
</body>
</html>
Not sure if this is what you need but it will result in #content taking up all the viewport and #header is contained within that, then any content you wanted to put in #content will appear after header.
<html>
<head>
<title>Test</title>
<style type="text/css">
body,
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
#header {
height: 50px;
background: green;
width: 100%;
}
#content {
background: blue;
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
}
</style>
</head>
<body>
<div id="content">
<div id="header">I am the header</div>
<p>first bit of content</p>
</div>
</body>
</html>
height:auto !important; height:100%; bit is for IE 6, you'd ideally do than in a style sheet directed at IE 6 only using IE condition comments.
I have three div's and I want two side divs seize as only space that is demanded by their content, and middle div to be as wide as possible. That's of cource in one row and with CSS.
The code is something like:
<div class='wrapper'>
<div class='small'>Left/div>
<div class='big'>Big</div>
<div class='small'>Right</div>
</div>
Any clues?
Have a look at The Perfect 3 Column Liquid Layout.
And here's one on Dynamic Drive.
Finally, for historical reasons, here's the A List Apart Holy Grail article.
The Perfect 3 Column Liquid Layout is a good place to start. You could also try something like this, which is very similar to that.
<html>
<head>
<title></title>
<style type="text/css">
.small1 {
float: left;
width: 20%;
height:100%;
}
.small2 {
float: right;
width: 20%;
height: 100%;
}
.big {
width: 60%;
height: 100%;
margin-left: 20%;}
</style>
</head>
<body>
<div class='small1'>Small1</div>
<div class='small2'>Small2</div>
<div class='big'>Large</div>
</body>
</html>
Edited due to slight markup mistake.
you can also use multiple wrappers (that way it'll be easier to set backgrounds)
<head>
<style>
.wrapper{background-color:black;}
.wrapperLeft{float:left;background-color:blue;width:70%}
.small{float:left;width:20%;background-color:red;}
</style>
</head>
<body>
<div class='wrapper'>
<div class='wrapperLeft'>
<div class='small'>Left</div>
<div class='big'>Big</div>
</div>
<div class='small'>Right</div>
</div>
</body>