I'm using Foundation's off-canvas navigation, attempting to make a navigation that takes up the full height of the device.
By default, the height of the menu options are determined by the height of the content being shown. This means if your content is less than the height of the menu items, your menu items will be invisible.
I would like both the menu, and the height of the content section to be fixed at the height of the device. With only scrolling in the content section if needed.
Setting the height, and min-height of content area to 100% doesn't seem to have any effect - only using a fixed height e.g. 500px will change the height - but then this isn't scalable.
How is this achieved?
If I give '.inner-wrap' a fixed height, the whole thing will adjust. How can I make sure .inner-wrap takes the full height of a device?
<div class="off-canvas-wrap">
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" ><span></span></a>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Label</label></li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</aside>
<section class="main-section">
<div class="section-inner">
<p>blah blah</p>
<p>test</p>
</div>
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
Try if this works, first enclose the <div class="off-canvas-wrap"> in another div
<div class="page">
<div class="off-canvas-wrap">
<div class="inner-wrap">
[..]
</div>
</div>
</div>
And then set the following css,
body,html{
height:100%;
width:100%;
}
.off-canvas-wrap,.inner-wrap{
height:100%;
}
If you want to block scrolling, say for a chat client, set .page height to 100%. And that would be
body,html{
height:100%;
width:100%;
}
.off-canvas-wrap,.inner-wrap{
height:100%;
}
.page{
height:100%;
}
This is the best way I've found and its pretty simple and non-hackish
NOTE: this only works on some css3 browsers. Compatible Browsers
Sass Version:
.off-canvas-wrap {
.inner-wrap{
min-height: 100vh;
}
}
CSS Version:
.off-canvas-wrap, .off-canvas-wrap > .inner-wrap {
min-height: 100vh;
}
Edit:
Foundation 6 sites version
.off-canvas-wrapper-inner, .off-canvas{
min-height: 100vh;
}
I had the same problems and this is what i've done:
i put .off-convas-wrapper , .inner-wrapper and aside out of my main content and just use .right(left)-off-canvas-toggle inside my body and my problem has solved.
with this way i dont need contents anymore.
BTW i put .exit-off-canvas at the end of my main content befor closing inner-wrapper tag
I had to hack the JS a bit, I found that depending on when the content is taller than the browser/device height or does not push to 100% height there were issues. Here’s my suggested fix: https://github.com/zurb/foundation/issues/3800
Related
Isn't the first time I want all content inside all sections are in a container with a max-width, but the only solution is duplicate html tags. Something like this:
<body>
<section class="one">
<div class="wrapper">
// content for one
</div>
</section>
<section class="two">
// There is a background here
<div class="wrapper">
// content for two
</div>
</section>
<section class="three">
<div class="wrapper">
// content for three
</div>
</section>
<section class="four">
// There is a background here
<div class="wrapper">
// content for four
</div>
</section>
</body>
Putting a div "wrapper" inside looks like the only solution to control every section with a max-width/centered and keeps the ability to put a full-width backgound in few section.
I don't like this solution, is a div duplicated for every section with same properties. If someday I change my mind and want remove it or I need to do it in every section or I need to remove css to that selector. Its look not semantical for me.
Any solution?
I would create a div like this
<div id="maindiv">
<div id="sitecontainer">
<!-- inner content -->
</div>
</div>
Then you can control max width from one place for all section. IF you don't want max width for a section, remove the site container div from within that section. You change your mind on the width? Change it in one place. You decide to go 100% width, change the width to 100% inside that div. Makes it easy to manage sitewide..
Your css
#sitecontainer { float: left; width: 1000px; margin: 0 auto; }
#maindiv { float: left; width: 100%; }
Then if you add another div,
<div id="secondarydiv">
<div id="sitecontainer">
// content still 1000px centered
</div>
</div>
I have this structure:
<div id="container">
<div id="header></div>
<div id="content>
<div id="sidebar"></div>
<div id="main"></div>
</div>
</div>
I need to use background-image on container, but it does not have any content. Only header, sidebar, and main have content. How I can do it without position: absolute or specifying height in pixels?
min-height is useful, but I want to try dynamic size.
As others had noticed, it doesn't make much sense to have a container without content... but if you really wanna do this, you could use a padding on your #container to give it the size of the image:
#container {
background-image: url(https://lorempixel.com/g/800/600/);
background-size: cover;
padding-bottom: calc(100% * (600/800));
}
<div id="container">
<div id="header></div>
<div id="content>
<div id="sidebar"></div>
<div id="main"></div>
</div>
</div>
This way, the container will have the same aspect ratio as your background image.
JSFiddle
Basically you can't show a background on a container that does not have content or specific height/width because it makes no sense.
A background means the "backside of the content", if the content don't have a size where you put the background? :)
If you have a rough idea of how much content the container is going to contain, you don't need to specify an exact height for it. Instead, consider using the min-height attribute like this:
#container {
background-color: black;
min-height: 50px;
}
<div id="container">
<div id="header"></div>
<div id="content">
<div id="sidebar"></div>
<div id="main"></div>
</div>
</div>
If you're setting a background, it means that it will be displayed behind all of the content within the area that the content is in. For this reason, a minimum height must be specified for it to display the background without requiring any fixed, unchangeable height and without any content in the container.
Try it:-
background: url("image.png") no-repeat 105% 105%;
try this:
#container {
min-height: 200px;
background-image: url('your-image.png');
}
If you zoom out my website, the structure of the header looks bad. I don't know what to do about this. This is the link of my website. This is the CSS and HTML structure. Hope you can help me, I really need help :(
If you want you header to stay in the centre with your content, you will need t do that, it doesn't just happen.
You should start by agreeing on a width you want you content in (you have width: 1100pxon your container div, so I'll go with that for you.)
In you css for .containerchange width: 1100px; to max-width: 1100px.
Then in the css for #header remove the position: absolute;. Add in max-width: 1100px; margin: 0 auto;
You will need to modify the structure of your HTML and place the header div inside the container div. Currently, that part of your HTML is like this:
<div id="header"></div>
<div id="container">
<div id="content"></div>
<div id="navigationposition"></div>
<div id="position"></div>
</div>
but it should be like this instead:
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="navigationposition"></div>
<div id="position"></div>
</div>
After modifying your HTML, you can add the following CSS to your stylesheet:
#header {
margin-left: -100px;
}
your header is positioned absolute
so when you zoom in and out it will stay absolute positioned. In the top left corner when the page is zoomed out
Also you do not have a wrapper for your code.... you may want to wrap everything in a container,
This will also take care of the image size thats over lapping your other content.
I do not know id you wanted the header to overlap like that but if it was intended just use margin-left
a wrapper will also contain your other divs sizes to stay within that wrapper.
Not going to work with zooming in and out
#header {
position:absolute;
z-index:101
}
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="underheader">
</div>
</div>
</body>
css
#wrapper{
width:800px;
} or whatever width you want
#header{
maegin-left:50px;
} or whatever px you desire
I don't even know if what I am asking is possible, but it's worth a shot. Basically I have a one page scrolling website controlled by jQuery, but it's a very very simple code, no plugin or external doc. That works great.
Every "page" if you will is divided into different divs to separately control function of pictures, tables, fonts, etc. per each page. Like this:
//home page
<div id="home">
content here
</div>
//about page
<div id="about">
content here
</div>
and so on and so forth... my question is, can i do something like this? I've tried but maybe I don't have the "decimal" in the right spot...
//home page
<div id="home resize">
<div id="home">
content here
</div>
</div>
//about page
<div id="about resize">
<div id="about">
content here
</div>
</div>
and then CSS be
home resize {
position: relative;
height: 100%;
width: 100%;
}
Two things I see right away. First, your CSS rule should be .home.resize instead of home resize. Second, height, when using percentages, requires that the height be set on the html tag to make a difference. So you will need rules such as this:
html {
min-height: 100%;
}
.home.resize {
height: 100%;
}
Otherwise, height will never take up the entire browser window height.
This all being said, I would guess that your best solution would involve JS or jQuery in some way. I know there are several single page scrolling plugins that do this job quite well.
First things first. HTML id's cannot contain spaces. You should define a class name resize. That being said. You can achieve this by using this.
Here is a fiddle
div id="home" class="resize">
content here
</div>
<div id="about" class="resize">
content here
</div>
.resize{
display:block;
height:100vh;
margin:0;
}
#home{
background-color:red;
}
#about{
background-color:blue;
}
vh is viewport height. It will set the height of your div same as viewport. 1vh is equivalent to 1/100th of viewport height
I'm helpless, tried my best understanding CSS but it's just not for me.
I would like to make a really simple MasterPage:
at the top a div of full width and height 40px (1)
at the bottom also a div of full width and height 40px (2)
in the middle:
on the left: a div of width 200 px (3)
on the right side of the left div: a div with contentPlaceHolder (4)
What I would like to get is: if i make some site that uses my master page and place a panel in the contentPlaceHolder that has width 800px, I would like my site to adjust to it - top, middle and bottom divs to have their width of 1000px (200 + 800). I also wouldn't like (and I have a huge problem with that) the (4) to move down if I resize (shrink) the browser window - I would like all the divs to be blocked.
This is my master page html:
<div>
<div class="header">
</div>
<div>
<div class="links">
</div>
<div class="content">
</div>
</div>
<div class="footer">
</div>
</div>
What kind of CSS do I have to write to make this finally work?
Not sure if you have checked into this or not, but we use the YUI-Grids CSS Framework for our layouts. It keeps us from having to spend a lot of time on CSS, which we are not great at being developers.
There is even a grid builder which will let you graphically layout a page, and then copy and paste the required HTML to make it happen :)
To prevent floated divs from being "squeezed" out of the alignment you want, you usually use either width or min-width.
For example, in this code the div containing the links and content will never be smaller than 1000 pixels. If the screen is smaller than 1000 pixels, a scrollbar is displayed.
<div style="min-width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
You could also use width instead of min-width:
<div style="width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
The difference between the two is simple: if you specify min-width, the div CAN grow to be larger if it needs to. If you specify width, the div will be exactly the size you specified.
Be aware that min-width is not supported by IE6.
Here's a quick stab at specific CSS/Markup for this problem.
Markup:
<!-- Header, etc. -->
<div class="contentView">
<div class="links">
</div>
<div class="content">
</div>
</div>
<!-- Footer, etc. -->
CSS:
.contentView {
/* Causes absolutely positioned children to be positioned relative to this object */
position: relative;
}
.links {
position: absolute;
top: 0;
left: 0;
width: 200px;
}
.content {
padding-left: 200px;
}
You might want your footer to be "sticky." Check here for information on that: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
How appropriate this is depends on precisely what the design calls for. This makes the links section more of a floating box on the left than a column for example.
This ends up looking like this (.content is green, .links is red):