I created the following layout:
What I want to achieve is, that the red and the blue container have a 100% height inside the wrapper. This is the HTML code so far:
#extends('master.main')
<!-- Section Insert for pageTitle -->
#section('pageTitle')
title
#endsection
<!-- Section Insert for content -->
#section('content')
<div class="menu-bar"></div>
<div class="main-content">
<div class="row row-no-padding">
<div class="col-md-7">
<div class="content-container-left">test</div>
</div>
<div class="col-md-5">
<div class="content-container-right">test</div>
</div>
</div>
</div>
#endsection
And the Styling:
#main-content-wrapper {
height: 100%;
margin-left: 60px;
background-color: #f7f8f9;
}
.main-content {
margin-left: 15px;
width: 100%;
height: 100%;
}
.content-container-left {
background-color: red;
float: left;
width: 100%;
padding: 15px;
}
.content-container-right {
background-color: blue;
float: left;
width: 100%;
padding: 15px;
}
.row-no-padding {
[class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
I tried to understand the logic how to achieve this, but still have issues as I do not have the most experience yet with that. I thought about a height setting of 100%, which does not work. But I do not understand why is that?
If the parent element is static then the height will be auto. If you have the parent element position: absolute and set fix height you will see 100% means it will fill the height of the parent of block element.
Please note by default block level element position is static (example div, h1, h2).
Please this documentation: http://www.w3.org/TR/CSS2/visudet.html#the-height-property
For
height: 100%;
to work, you need to have an explicitly set height on the parent element.
I'd suggest:
html, body{
height: 100%;
}
.main-content,
.main-content > .row,
.main-content > .row > div {
height: 100%;
}
.content-container-left,
.content-container-right{
height: 100%;
}
Related
I want to have a div in the background (100% width of browser) by mouseover on a content-div. Everything works great but i dont know is there a solution to make the background div as height as the parent?
Without using Jquery? Pure CSS would be great!
Thanks!
.content {
/* position: relative; >> will make the absoluted positioned div 100%width of the browser*/
z-index: 1;
}
.background {
position: absolute;
background: aqua;
width: 100%;
right: 0px;
left: 0px;
z-index: -1;
display: none;
}
.post:hover .background {
display: block;
height: 10%;
/* WHAT TO DO? */
}
<div class="post">
<div class="content">
<div class="background"></div>
…content…
</div>
</div>
part of the problem is: the "post" div is in a centerd "main" div with a given width and i want to have a background-div that has 100% width of the viewport
Sorry, it is a bit hard to explain what i need, therefore I make a small sketch here:
This is posible with vw units, look:
* {
margin: 0;
padding: 0;
}
.main {
background: #29D;
margin: 0 auto;
max-width: 800px;
}
.post {
background: #E31;
margin: 3vw 3vw 3vw 12vw;
}
.content {
background: #8D5;
margin: 2vw;
}
.content img {
width: 100vw;
margin-left: -14vw;
display: block;
}
#media(min-width: 800px) {
.content img {
margin-left: calc(800px / 2 - 50vw - 14vw);
}
}
<div class="main">
.main
<div class="post">
.post
<div class="content">
.content
<img src="http://s3.postimg.org/3k8v5p0v7/dragon.jpg">
</div>
<div class="content">
.content
</div>
<div class="content">
.content
</div>
</div>
</div>
First thing you need to know is the max width of your wrapper. In my case it is 800px. You have to substitute all the 800's with your size. Then notice that all your left margins should be in vw units or pixels but not 100%. The trick here is that calc() function and the media query!
I'm trying to use CSS calc() to build an App Style layout with a footer at the bottom.
The main CSS players:
.content-container {
height: calc(100% - 110px);
background-color: red;
overflow: hidden;
}
.left, .right {
float: left;
height: 100%;
}
.left {
width: 70%;
background-color: blue;
}
.right {
width: 30%;
background-color: yellow;
}
.right-content {
overflow: auto;
height: 100%;
margin-bottom: 30px;
}
Here's a quick overview of the HTML:
<div class="content-container">
<div class="left">
<h1>left</h1>
</div>
<div class="right">
<div class="right-title">
TITLE OF THE SECTION
</div>
<div class="right-content">
<div class="group">
</div>
</div>
</div>
</div>
<div class="footer"></div>
Please view the full example here:
http://codepen.io/woocas/pen/MwyBGd?editors=110
I'm trying to make the overflow in the .right div (the yellow one) take the height of the .content-container.
But as you can see in the example, the scrollbar goes beyond the space allocated to it by content-container. It's behind the footer.
Any help would be greatly appreciated.
Have you tried setting the CSS heights in your right column to percentage values since they're embedded in a container they'll always present in a fit manner?
.right-title {
background-color: gray;
height: 65%;
}
.right-content {
overflow: auto;
height: 35%;
}
You could do another calc on the .right height and add a margin-bottom, so that .right will not go beyond the footer, but the whole thing seems to be a bit over-complicated.
.right {
width: 30%;
background-color: yellow;
height: calc(100% - 90px);
padding-bottom: 90px;
}
I've two floated DIVs (two columns) which are nested in an "clear-float"-DIV, which itself is nested in an centered DIV ("wrapper" DIV).
<div id="content">
<div class="block2">
<div id="slot_left">
CONTENT-LEFT
</div>
<div id="slot_right">
*CONTENT-RIGHT*
</div>
</div>
</div>
The right column has min-width and max-width CSS option set. But the wrapper DIV, which has min-width and max-width also, is always expanded to max width.
#content {
min-width: 300px;
min-height: 80px;
max-width: 350px;
margin: 0 auto;
background: #c00;
}
.block {
overflow: hidden;
_overflow: visible;
_overflow-x: hidden;
_height: 0;
}
#slot_left {
width: 200px;
background: #ff0;
float: left;
position: relative;
}
#slot_right {
float: left;
background: #cc0;
min-width: 100px;
max-width: 150px;
position: relative;
}
What's the reason for that? I want the wrapper DIV to has minimum width required but to be centered on screen.
Here is an fiddle.
use display:inline-block
why this is happening?? div is by default block level element, so when you have given max-width, it will always obey it to occupy max area possible....
http://jsfiddle.net/sHB7g/3/
CSS
#content {
min-width: 300px;
min-height: 80px;
max-width: 350px;
margin: 0 auto;
background: #c00;
display:inline-block
}
.block {
display:inline-block;
overflow: hidden;
border:1px solid #000;
}
http://jsfiddle.net/sHB7g/1/
#content {
display: inline-block;
}
and then added a content wrapper
#contentwrapper {
text-align: center;
}
the html then is like this
<div id="contentwrapper">
<div id="content">
<div class="block">
<div id="slot_left">
CONTENT-LEFT
</div>
<div id="slot_right">
*CONTENT-RIGHT*
</div>
</div>
</div>
Okay so I've started making myself a website for a project that I'm working on. I'm currently sorting out the layout for my website but am stuck on the navbar.
I want my navbar to span 100% of the website, and horizontally/vertically center my buttons (images).
What I've got works ... but I'm just wondering if I'm doing it the most efficient way?
Here is my html.
<div id="wrapper">
<div id="header">
<div id="navbar_left">
</div>
<div id="navbar_buttons">
<img src="../Originals/button_home.png" />
<img src="../Originals/button_logo.png" />
</div>
<div id="navbar_right">
</div>
</div>
</div>
Here is my CSS:
#wrapper {
width: 100%;
margin: 0 auto;
padding: 0;
}
#header {
height: 123px;
width: 100%;
background-image: url(../../Originals/header_background.png);
}
#navbar_left {
width: 25%;
height: 123px;
float: left;
}
#navbar_buttons {
height: 123px;
width: 50%;
float: left;
line-height: 123px;
text-align:center;
}
#navbar_buttons::after {
content: ".";
visibility: hidden;
}
#navbar_right {
width: 25%;
height: 123px;
float: left;
}
Check out this jsFiddle for one example of how you could simplify your markup and CSS. It makes use of inline-block for your images.
HTML (using the header element):
<div id="wrapper">
<header>
<img src="http://placehold.it/200x100" />
<img src="http://placehold.it/200x100" />
</header>
</div>
And CSS:
header {
text-align: center;
background: #222;
}
header img {
display: inline-block;
vertical-align: bottom;
}
Note that a div is display: block by default, so you don't need to specify the width of 100%: it will fill the available width. Similarly, you don't need to declare a margin or padding as they aren't doing anything.
I'd also avoid declaring a fixed height if you can avoid it: just let your parent div expand to the height of its contents.
I'm trying to stretch the content of a div the height of the page. I've Googled the problem and so far nothing works. The whole thing is starting to give me a headache. Perhaps someone more experienced could take a look at my code? The full stylesheet is >400 lines, so I'm including what is (hopefully) relevant.
"Wrapper" takes up 100% of the page height, whereas "contentShadow" stretches only to the height of the text in the div "content".
Edit: as far as I can tell, every container has its height set to 100%, which whould make "contentShadow" 100% as well. Right...?
Edit 2: I'm starting to see the problem, but don't know how to solve it. While the following code will keep the footer down, it also means that since .wrapper doesn't have height:100%, "contentShadow" will not stretch. The question then is how I keep my footer down while changing this code:
.wrapper {
min-height: 100%;
height: auto !important;
margin: 0 auto -37px;
}
To this:
.wrapper {
height: 100%;
}
Basic structure of the page:
<div id="body">
<div id="headerWrapper"></div>
<div id="wrapper">
<div id="contentShadow">
<div id="#contentWrapper">
<div id="content">
<!-- contentshadow stretches the height of this content and no further, but SHOULD stretch the height of the entire page -->
</div>
</div>
</div>
<div id="push"></div>
</div>
<div id="footer"></div>
Css rules relevant to these divs:
html, body {
height: 100%;
}
#headerWrapper {
height: 314px;
width: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -37px;
}
#contentShadow {
min-height: 100%;
width: 994px;
background-image: url(../images/contentShadow.png);
background-repeat: repeat-y;
margin-right: auto;
margin-left: auto;
}
#contentWrapper {
min-height: 100%;
width: 940px;
margin-right: auto;
margin-left: auto;
padding-right: 16px;
padding-bottom: 16px;
padding-left: 16px;
padding-top: 17px;
background-color: #EDECEC;
overflow: hidden;
}
#content {
min-height: 100%;
}
.footer, .push, {
height: 37px;
}
.footer {
background: white;
clear: both;
height: 37px;
}
You have really wrong code:
.wrapper matched <div class="wrapper"> not <div id="wrapper">.
<div id="#contentWrapper"> is not correct, you should try <div id="contentWrapper">
height: auto; is the problem. The wrapper needs to be 100% height, not auto...
the height: 100% after height: auto !important doesn't make sens, because of the !important keyword.
Maybe it's the default margins and padding, have you tried this?
body {margin: 0px; padding: 0px; }
I had this issue for the better part of my life, but I just solved it for myself, so I'm sharing, just in case somebody else can benefit.
My HTML/BODY selector is set to height:100%.
My container div within the HTML/BODY selector is set to min-height:800px.
My CONTENT div inside of the CONTAINER div didn't have a height, and I had the issue of the div not stretching to the bottom of the page. When I inspected this div, I noticed that for some reason, it was stretching way below its container div, pushing it up and creating that annoying space at the bottom of the page. Once I placed a height on that inside DIV, the issue went away for me.
I hope this helps.
The contentShadow must have overflow: auto. Try this
body, html { height: 100%; margin: 0; padding: 0; }
#container { width: 100%; height: 100%; overflow: auto; display: block; }
<body>
<div id="container">
This should fill the page!
</div>
</body>