I am using bootstrap and want a full width div to go 100% height on a background image. I can't figure out why its collapsing to just the line height. Any ideas? See fiddle:
http://jsfiddle.net/aartese/3kRVm/
<body>
<row><!--landing section -->
<div class="col-md-12 landing">Landing</div>
</row> <!-- /landing section -->
<row><!--about section -->
<div class="col-md-12 about">About</div>
</row><!-- /about section -->
<row><!-- professional profile section -->
<div class="col-md-12 professional">Professional</div>
</row><!-- /professional profile section -->
<row> <!-- contact section -->
<div class="col-md-12 contact">Contact</div>
</row> <!-- /contact section -->
</body>
Is that what you meant? The basic concept is copied from Ryan Fait's sticky footer. It basically revolves around ensuring that all the parent elements' min-height and height are 100%
Related
I'm making an instagram story style template. What I have done so far is to define a fluid container and inside it, add three columns with content such as progress bars, a logo, etc.
Everything works fine, except that for some reason, there is a space on the right side of the screen at any resolution. I have tried several techniques, such as adding a width of 100% to the container, removing the padding from the body, with no results.
This is the body and the main components of my template:
<body style="background-color: #000; overflow-x: hidden;">
<!-- Container with background color and 100% height -->
<div class="container-fluid" style="height: 100vh; padding:0px;">
<div class="row align-items-center">
<div class="row">
<!-- Hide on small screens -->
<div class="col-lg-4 d-none d-lg-block" style="background-color: #F4F4F4;">
</div>
<!-- Hide on small screens -->
<!-- Main content -->
<div class="col-lg-4" style="background-color: #fff; height: 100vh;">
...
</div>
<!-- Main content -->
<!-- Hide on small screens -->
<div class="col-lg-4 d-none d-lg-block" style="background-color: #F4F4F4;">
</div>
<!-- Hide on small screens -->
</div>
</div>
</div>
</body>
This is the resulting space. I've colored black so it's more visible.
Here is a link to my snippet, I really need help, I don't know what's going on. Thank you very much in advance. I know that the style should not be inline, it is like this while I am building the site.
Solved adding margin: 0px; padding: 0px; to the row class.
I've looked at the similar questions that came up from this title, but they're not quite the same issue I'm having.
https://jsfiddle.net/kx4q1ut8/1/
<div style="display:flex;flex-direction:column;height:100vh;background:gray;">
<div style="background:red; width:100vw;min-height:80px;">Header</div> <!-- Header -->
<div style="background:green;width:100vw;flex-grow:1;display:flex;flex-direction:row"> <!-- outer body container -->
<div style="background:blue; width:140px;height:100%;"></div> <!-- side bar -->
<div style="background:yellow;height:100%;flex-grow:1;display:flex;flex-direction:column"> <!-- inner body container -->
<div style="background:gray;width:100%;height:200px;"> <!-- filter panel -->
</div>
<div style="background:cyan;width:100%;flex-grow:1;overflow:scroll"> <!-- table panel -->
want this content scrollable if beyond bottom of page
</div>
</div>
</div>
</div>
All the areas are fixed sizes except for the cyan area. I need that area expandable to match the rest of the window height. What I also need is for that area to have scrollable content but can't seem to work that part out completely. If you fill the area with enough text it'll get a scrollbar but I think that container is expanding beyond the bottom of the page because I can't fully scroll to see the end of the off-screen content. The layout is for a web application.
I have created this simple tribute page, with fixed background image.
I wanted to offset the container with the text content (I created a class just for it: .main-content) a bit down with a margin-top: 130px, so it's not glued to the very top of the page.
<body> <!-- applied background-image here -->
<div class="darken"> <!-- dark overlay on the background image -->
<div class="container-fluid">
<div class="container main-content"> <!-- .main-content - has margin-top: 130px; applied -->
<div class="row">
<div class="col-lg-offset-2 col-lg-10"> <!-- Bootstrap centering -->
<h1 class="display-1">St. Pope John Paul II</h1> <!-- just another text below... -->
<h2 class="display-4">Pope of the family</h2>
</div>
</div>
<div class="row">
<div class="col-....... <!-- rest of the text -->
However - a strange thing happened - the
.main-content {
margin-top: 130px;
}
margin seems to affect the body (according to Chrome DevTools...) thus eventually affecting (applying the margin-top to) the div with .darken class!
I want to achieve two things:
Having my text offset from the top of the page
Having .darken class applied to the full viewport
How can I achieve this?
CodePen link
Please try this:
Instead of margin use padding.
.main-content {
padding-top: 130px;
}
It's possible to accomplish this with Twitter Bootstrap:
<div class="container-fluid">
<!-- FULL BACKGROUND -->
<div class="container">
<!-- CONTENT CENTERED -->
</div>
</div>
But with only 1 div?
<div class="container-semifluid">
<!-- CONTENT CENTERED WITH FULL BACKGROUND -->
</div>
The objective is to have a fluid background and center the content as if it was a "container". I have the 1 div restriction.
I have my page structured into 3 different modules: navigation on the left, images in the center, and social sidebar right. Below is the css that formats this content. I'm having trouble when I resize the window; the images in the center overlap with the navigation on the left and the sidebar gets pushed to the bottom of the page and overlaps with the end of the left navigation. The navigation module/sidebar is fixed.
I'm using twitter bootstrap as a base.
Any ideas on what's causing this and how to fix this?
css
div.sidebar{
width: 120px;
position:fixed;
top:12%;
left:2%;
overflow-y:auto;
height:100%;
}
html
<div class ="container-fluid">
<div class = "row-fluid">
<!-- left navigation div -->
<div class = "span1" style = "width:120px;">
<div class = "sidebar" >
#navigation
</div>
</div>
<!-- middle images div -->
<div class = "span8" style = "width: 900px;">
#lot of images
</div>
<!-- social sidebar -->
<div class = "span2" style = "margin-left: 10px; ">
#social module with images
</div>
</div>
</div>
when I make the window smaller
normal
Have you thought about responsive web design?
You say your using twitter bootstrap? Have a look at this:
http://twitter.github.com/bootstrap/scaffolding.html#responsive
Add this to the head
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
Change the HTML:
<div class="container-fluid">
<div class="row-fluid">
<!-- left navigation div -->
<div class="span4">
<div class = "sidebar" >
#navigation
</div>
</div>
<!-- middle images div -->
<div class="span6">
#lot of images
</div>
<!-- social sidebar -->
<div class="span4">
#social module with images
</div>
</div>
NOT TESTED. Im also not 100% how big the fluid container is, i think its 12, if its 16 you will have to change the spans so they add up to 16
Couple issues I see...
You are completely defeating the purpose of ".row-fluid" and the framework by adding widths?? Remove all width assignments to the grid elements (ie. .container, .row, .span(x)) and let the framework do what it was designed to do...create the width for you. If you need to adjust width from what is being generated, add it to block level element INSIDE of the .span(x).
Your span HAVE to add up to NO MORE than 12. You have 14 which will absolutely make the last wrap around.
Overriding the spans with inline widths will cause odd behavior. Can you use the default TBS scaffolding instead?
Suggestions :
1.Remove all the extra things you put for style let bootstrap do the things !!
2.always test your div with "well"
Put your codes like this
<div class="container">
<div class="row" style="margin-top:20px;">
<div class="col-lg-3 col-sm-12 ">
<div class="well"></div>
</div>
<div class="col-lg-3 col-sm-12 ">
<div class="well"></div>
</div>
<div class="col-lg-3 col-sm-12 ">
<div class="well"></div>
</div>
<div class="col-lg-3 col-sm-12 ">
<div class="well"></div>
</div>
</div>
col-lg-* for large device
col-xs-* for extra small device
col-sm-* for small device
use it like this you can achieve what you want
Plunker demo
resize your browser to view the effect