This is my css:
html{
position: relative;
height: 100%;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
min-height: 100%;
margin-bottom: 60px;
}
.container {
padding-top: 50px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
.footer p{
line-height: 60px;
}
.messages {
/*background-color: blue;*/
min-height: 100% !important;
height: 100% !important;
}
This is my markup (using blaze for template rendering):
<template name="messages">
<div class="container messages">
<div class="row">
<div class="col-md-3 conversations">
{{> message}}
</div>
<div class="col-md-9 conversation-holder">
<h1>John Doe</h1>
<div class="conversation">
</div>
</div>
</div>
</div>
</template>
This is my output:
What I want is that the line between the list of conversations and the title(John Doe( on the right) should be of 100% height and that any overflow should be scrollable.
I have set the min-height and height of the .messages container to be 100% with the !important but it does not work i do not know why.
How do I make it 100%? Thanks.
P.S: Here is the template after rendering:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="__blaze-root">
<nav class="navbar navbar-inverse navbar-fixed-top">
<!-- navbar stuff removed for better understanding-->
</nav>
<div class="container messages">
<div class="row">
<div class="col-md-3 conversations">
<a href="#">
<div class="message">
<div class="conversation-title">
<img class="pull-left img-circle" height="50px" src="/images/dummy-profile-pic.png" width="auto">
<p class="pull-left">John Doe</p>
</div>
</div></a>
</div>
<div class="col-md-9 conversation-holder">
<h1>John Doe</h1>
<div class="conversation"></div>
</div>
</div>
</div>
<footer class="footer">
<p class="text-muted">Place sticky footer content here.</p>
</footer>
</div>
</body>
</html>
Just realized that you are using bootstrap framework. You have to cascade the height from the parent div to the inner div till it reaches the .message element.
Otherwise, you can't set the height as 100%. (Any padding or margin in the intermediate div would introduce vertical scroll)
Fiddle that shows the 100% to 2 level down from the body tag.
http://jsfiddle.net/skelly/zrbgw/
Solution 2: You have to use position:absolute for .message
Solution 3: You can use position:fixed
But solution 2 & 3 will remove the elements out of the content flow resulting in need of setting a proper parent height.
Related
I'm trying to build a CMS style html template so that a user can drop content into a template.
I'm using bootstrap grid to create the template but I'm having some issues.
Basically I'm shooting for a main body container, which has a sticky top, a sticky bottom, and then the main middle section filling the rest of the space which houses other areas.
IN this case, the middle section has 2 areas at 50%, one to the left and one to the right.
The problem is my middle section is currently stuck to the very top of the page along with the top section but I need it to fill up the middle the way that I've structured it but I"m not sure how I should change positioning.
Here's the current block:
<head>
<style type="text/css">
html,body{
height:100%;
}
</style>
</head>
<div class="container-fluid" style="text-align: center; height:100%; border: 1px solid red;">
<div class="row top">
<div class="col-lg-12" style=" background-color: #A0A0A0;position: absolute; height: 15%;">
<p style="color: white">Top</p>
</div>
</div>
<div class="row middle">
<div class="col-lg-6" style=" background-color: #A0A0A0">
<p style="color: white">Left</p>
</div>
<div class="col-lg-6" style=" background-color: #A0A0A0;">
<p style="color: white">Right</p>
</div>
</div>
<div class="row bottom">
<div class="col-lg-12" style=" background-color: #A0A0A0; bottom:0; position: absolute; height: 10%;">
<p style="color: white">Bottom</p>
</div>
</div>
</div>
You're making it hard on yourself. Here are a few things you could change to get the desired result and also make it easier for yourself to control and contain your CSS. I've added .my-container class to .container-fluid to keep the changes from applying to other pages, but that's totally optional:
html,
body {
height: 100%;
}
.my-container {
display: flex;
flex-direction: column;
border: 1px solid red;
height: 100%;
}
.my-container>.top [class^="col-"],
.my-container>.bottom [class^="col-"] {
background-color: #A0A0A0;
color: white;
text-align: center;
}
.my-container>.middle {
/* make middle section push header and footer at the margins of available space */
flex-grow: 1;
}
.my-container>.middle>* {
border: 1px solid red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid my-container">
<div class="row top">
<div class="col-lg-12">
<p>Top</p>
</div>
</div>
<div class="row middle">
<div class="col-lg-6">
<p>Left</p>
</div>
<div class="col-lg-6">
<p>Right</p>
</div>
</div>
<div class="row bottom">
<div class="col-lg-12">
<p>Bottom</p>
</div>
</div>
</div>
I also:
removed inline styles
removed position:absolute (otherwise you'll need to keep header and footer height in sync with <body> or .container-fluid top and bottom paddings which allow all your content to be visible)
used flex to position the header and footer
removed % height which is considered very bad UI (consider what happens on mobile when you rotate the screen - how it affects an element with height:15%).
Okay I do not know wether I have started completely wrong or just do not know how to get it right.
I want the layout of my website to be like this:
I put a div called 'myWrap' around the header and the content. And added this css:
.myWrap {
position: absolute;
padding: 0px;
margin: 0px;
background: white;
top: 2%;
left: 2%;
right: 2%;
}
.footer {
position: absolute;
background: #363130;
margin-top: 2%;
height: 300px;
left: 0;
width: 100vw;
}
And the footer is not in the myWrap-div. But now it is just floating behind the content because the position of the myWrap is absolute.
How do I put the header and content in the normal flow but infront of the background?
I structured the html like that:
<div class="row container-fluid myWrap">
CONTENT
<div class="container-fluid footer">
FOOTER
</div>
</div>
If I put the footer out of the myWrap div it starts floating around on the top or just overlaps the content/header
Change .myWrap to position: relative, your footer is getting the position absolute of the body, because It dosn't have a parent element with a relative position CSS atribute.
.myWrap {
position: relative;
}
With this, you will get your footer always on the bottom of myWrap. Then you can play with, the top/bottom properties and place it where you want ;)
I have created a Bootply to show it how it's working: http://www.bootply.com/8Wmx3CJHFv
Try this
<div class="myWrap">
<div class="container">
<div class="row">
Then add your footer after the end of the container
Personally, I would not work with your own wrapper. Bootstrap made them with a reason and that reason is they will work perfectly for responsive viewports.
I'd suggest you enhance something like this:
HTML
<html>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
// content here
</div>
</div>
</div>
</header>
<section id="content">
<div class="container">
<div class="row">
<div class="col-lg-12">
// content here
</div>
</div>
</div>
</section>
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
// content here
</div>
</div>
</div>
</footer>
</body>
</html>
CSS
body {background-color: #FFF;}
footer {background-color: #FFF;}
header {background-color: #FFF;}
.container-fluid {padding: 0 0;}
Just make sure you remove the padding for the .container-fluid. And a tip: if you ever feel like creating your own wrapper, don't position them with absolute, but with relative. Otherwise it won't work well on all viewports.
You mentioned that you are using bootstrap, in bootstrap the container class wraps your data into a wrapper that has a fixed width on each screen-device-width so you will need to add a container div for the header and the content without adding it inside the footer div.
If you are using bootstrap framework you will need to use these following classes for these div's as the following code:
<div class="site-container">
<div class="header">
<div class="container">
</div>
</div>
<div class="content">
<div class="container">
</div>
</div>
<div class="footer">
</div>
</div>
<style>
body{
background:url(../image.jpg);
}
header {
max-width:600px;
width:100%;
display:block;
background:#ccc;
height:250px; //header height no need to mention in your work
border:1px solid #000;
margin:auto;
}
#content {
max-width:600px;
width:100%;
display:block;
background:#ddd;
height:500px; //content height no need to mention in your work
border:1px solid #000;
margin:auto;
}
footer {
width:100%;
height: 300px;
left: 0;
background:#000;
}
</style>
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
// Header
</div>
</div>
</div>
</header>
<section id="content">
<div class="container">
<div class="row">
<div class="col-lg-12">
// Content
</div>
</div>
</div>
</section>
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
// content here
</div>
</div>
</div>
</footer>
Demo: https://jsfiddle.net/q4Lcjmsy/3/
I am trying to implement a design from my graphic designer, which whilst looks cool is giving me some headaches as i don't know how to implement in bootstrap.
We have a call to action section, which aligns with the 12 column grid system on its left and right extremes.
It also stretches to the view-port edges:
On the left we have red background stretching all the way to the view-port edge.
On the right we have a grey background image stretching all the way to the view-port edge.
I haven't been able to find a search term for what I am looking to achieve let alone where to start (other than have the cta use the background for the entire width, then overlay a left element over the top).
Any idea on how to code the below graphical layout in bootstrap please?
<section class="cta" style="background: grey; position: relative">
<div class="red" style="position: absolute; left: 0; width: 10%; background: red"></div>
<div class="text-outer">
<div class="container">
<div class="row">
<div class="col-xs-6">left</div>
<div class="col-xs-6">right</div>
</div>
</div>
</div>
</section>
Using <div class="container-fluid"> as a starting point; I am guessing at your page's layout. Let's try this:
See below:
.cntn {
border: 1px red solid; /* you can remove this (not needed) */
}
.red {
background-color: red;
text-align: right;
margin: 0; /* optional */
width: 100px; /* adjust to suit your needs */
float: left;
}
.cta {
margin: 0; /* optional */
float: right;
border: 1px solid green; /* you can remove this (not needed) */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- make container fluid -->
<div class="container-fluid">
<div class="row">
<!-- heading area: hexagon -->
<div class="red">
<img src="http://placehold.it/100/100" />
</div>
<!-- heading area: call-to-action -->
<section class="cta">
Action
</section>
</div>
<div class="row cntn">
<div class="col-xs-6">left</div>
<div class="col-xs-6">right</div>
</div>
</div>
Simply change 'div class="container"' to 'div class="container-fluid"'
Something like this? Where black should be the grey gradient and max-width:400px could be anything.
.cta {
overflow-x: hidden;
position: relative
}
.text-outer .container {
width: 100%;
max-width: 400px;
background: grey;
z-index: 2;
position: relative;
}
.text-outer:before,
.text-outer:after {
content: "";
position: absolute;
width: 50%;
height: 100%;
top: 0;
}
.text-outer:before {
background-color: red;
left: 0;
}
.text-outer:after {
background-color: black;
right: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<section class="cta">
<div class="text-outer">
<div class="container">
<div class="row">
<div class="col-xs-6">left</div>
<div class="col-xs-6">right</div>
</div>
</div>
</div>
</section>
jsFiddleLink
I created with 3 divs as Left Center and Right but if you want to use Left and center then create your own class. Probably following will work
.custom {
width:calc(100% - (50% - 768px/2));
}
.custom {
width:calc(100% - leftCellWidth);
}
You can set height of left as per height of hex image.
Use jumbotron class outside the class container for full-width, as explained here.
HTML:
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="red col-xs-4">
</div>
<div class="grey col-xs-8">
</div>
</div
</div>
</div>
CSS:
.red {
background: url('awesomeredimage.png');
background-size: cover;
}
.grey {
background: url('awesomegreyimage.png');
background-size: cover;
}
All your divs should be wrapped in the container div. And as some others have also suggested: container-fluid helps.
Within container fluid you can add a regular container for the rest of your content. My code below explains this.
You could take the easy route and just use the entire cta image you've posted as a clickable image with .img-responsive in a col-xs-12. In that case my fix takes you about 2 minutes:
<section style="background: grey; position: relative">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<img src="/img/cta.jpg" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="container">
<!-- All you other content here-->
</div>
</div>
</div>
</div>
</section>
But you could also hack the design into cols, as I try to show in the code snippet below. Of course you need to tweak and decide on the exact sizes yourself.
<section style="background: grey; position: relative">
<div class="container-fluid">
<div class="row">
<div class="col-xs-3 red">
<img src="/img/hexagon.png" class="img-responsive pull-right">
<!--and give this img a negative margin to flow over to the grey area-->
</div>
<div class="col-xs-1 grey-image"></div>
<div class="col-xs-3 grey-image">
<h3 class="text-center">Call to action</h3>
<p class="text-center">Discount etcetera</p>
</div>
<div class="col-xs-5 grey-image">
<button class="btn center-block">Request quote</button>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="container">
<!-- All you other content here-->
</div>
</div>
</div>
</div>
</section>
Use class="container-fluid" instead of class="container" and than do this style:
.container-fluid {
margin-right: auto;
margin-left: auto;
padding-left: 0px;
padding-right: 0px;
}
I have a problem with responsiveness. In my example by right side there's 30 px blank place. I don't know how the hell fix it. Does somebody have any idea? http://jsfiddle.net/98p3webw/ details details details details
.imageeee {
position:absolute;
max-width: 100%;
}
.logo{
max-width: 100%;
max-height: 100%;
}
.max{
width: 100%;
position:relative;
}
.background{
position:absolute;
width: 100%;
background-image: url("http://www.psdgraphics.com/file/colorful-triangles-background.jpg");
height: 100%;
background-size: cover;
}
<body>
<div >
<div class="row">
<center>
<img class="logo" src="http://i59.tinypic.com/dcbgiw.png">
</center>
</div>
<div class="background col-md-12">
<div class="max">
<div class="col-md-2"></div>
<div class="col-md-8 thumbnail" style="top: 40px;" >
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
</div>
<div class="col-md-2"></div>
</div>
</div>
</div>
The 15 pixel spacing you are seeing are being added by Bootstrap's row class.
.row {
margin-left: -15px;
margin-right: -15px;
}
In Bootstrap, .row elements should be wrapped by a .container or container-fluid element.
From the Grid system section of the Boostrap docs:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
So wrapping your .row element in a .container should solve your immediate problem.
JSFiddle Example:
<div class="container">
<div class="row">
<center>
<img class="logo" src="http://i59.tinypic.com/dcbgiw.png">
</center>
</div>
</div>
Further Reading:
You might want to read over the Boostrap docs for the grid system so you can make sure you use it correctly in other places. Also, the <center> tag is deprecated, You should use the CSS test-align property instead.
I am using an absolute div so I can overlap one div from another. The div that overlaps is the absolute one (.content). However, if the overlapped div (.left) doesn't fit the screen, a horizontal scroll bar doesn't appear of course. How can I make the horizontal scroll bar automatically appear if its contents doesn't fit the given width? Here is the css:
.left {
width: 70%;
height:100%;
float:left;
overflow-x:auto;
}
.content {
position: absolute;
width: 70%;
height: 100%;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 130px;
background-color: #2b3e50;
border-left-width:5px;
border-left-style:solid;
border-left-color:#153450;
padding-left: 20px;
}
Please help me figure this out.
EDIT
Here is the div structure:
<div class="topbar">
<div class="fill">
<div class="container">
Home
<ul class="nav">
<li> One </li>
<li> Two </li>
<li> Three </li>
<li> Four </li>
</ul>
<p align="right">Log-out </p>
</div>
</div>
</div>
<div id="loader" class="left" style="border-right-width:15px;">
</div>
<div class="container">
<div class="content">
<div class="row">
<div class="span14">
#content
</div>
</div>
</div>
</div>
<script>
$("#loader").html('<object data="#routes.Tags.map(false)" />');
</script>
EDIT
I surrounded the left div with a parent div.
<div class="parent">
<div id="loader" class="left" style="border-right-width:15px;">
</div>
</div>
<div class="container">
<div class="content">
<div class="row">
<div class="span14">
#content
</div>
</div>
</div>
</div>
With the following css for parent.
.parent {
width: 100%;
position: relative;
}
But still doesn't show a scrollbar.
In your html left is not child of content you can't make it scroll.
If you have parent > child then just use position: relative on parent block.
Here is example http://jsfiddle.net/4swN9/