I am using ng-view, to display view based on the routeProvider. In my application, ng-view added like this
<div ng-view style="height: 100%; background:#000000;"></div>.
In one of my views, there is a left navigation, which should displayed 100% in height in the browser. For some reason, left view navigation height is created only based upon the data. That is if data is more, height is incremented.
I am not sure, why height is not incremented even though I set hieght=100%, here is the code of Left navigation
<div class="options1">
<div class="options">
<a ng-repeat="name in list" >{{name.name}}</a>
</div>
</div >
.options {
background:#FFFFFF;
min-height: 190px;
width:10em;
height:100%;
border: 1px solid red;
color:#FFFFFF;
}
.options1 {
min-height:100%;
background:red;
width:15em;
}`
I got it working, it is an CSS issue.
I have added this into CSS,
html, body { height: 100%; width: 100%; margin: 0; }.
Here is the link for more details
Css height in percent not working
use Viewport Height, it's absolutely
style="height: 100vh;"
This isn't an angularJS issue, but most likely a CSS styling issue. If it is so, then you need to investigate it as such - there isn't much information to go on in your question, but a div stretches to 100% of it's parent, so you need to make sure that is happening. Also, positioning is very important.
If this is the case, there is no need to duplicate an answer - see if this other SO answer is of any help.
I think css:
.ng-scope{
height: 100% !important;
}
On my computer it works correctly,
for reference only
Related
I have been banging my head against the wall trying to figure out this problem and I have looked high and low for the answer and came up with similar results.
Synopsis
The problem is that I am building a website using the 960 grid and have three columns that I want to stretch at 100% at all times. Here is a fiddle for your reference: http://jsfiddle.net/Uec7h/1/
Essentially the html is like so:
<div class="contentWrapper">
<div class="container_12">
<div class="grid_2 leftSide clearfix">
Left sidebar content.
</div>
<div class="grid_7 content">
Lots of content loaded from the server.
</div>
<div class="grid_3 rightSide">
Right sidebar content.
</div>
</div>
</div>
with the CSS being like
html, body {
height: 100%;
}
.content {
height: 100%;
}
.leftSide {
height: 100%;
background-color: #000000;
}
.rightSide {
height: 100%;
background-color: #000000;
}
.contentWrapper {
height: 100%;
}
The fiddle isn't completely accurate to what I am seeing on my local version, but it's close. Seems like the left and right sidebars do not want to expand to 100% no matter what I do.
What I've Tried
Most of the answers I have found on SO have suggested to put height: 100% on the html, body elements and everything should work out fine. Adding this attribute and giving both sidebars height: 100% did work a little bit, but if the content in the middle column gets too big, it stops at a certain point and won't continue to stretch.
I have tried adding the clearfix class that comes with the 960 grid but it didn't seem to help at all.
Question
How do I get the left and right side bars height in the fiddle to be 100% no matter what content is in the middle column?
If you add the following CSS to the sidebar elements it will fill the 100% of the height.
display:block;
height:auto;
position:absolute;
top:0px;
bottom:0px;
If you place the sidebar into a wrapper div with relative positioning, the content section will be again in it's right place...
I would also set padding and margin to 0 for the body.
EDIT:
If you add height: 100% to the .container_12 it will get a real height, and children elements can have a 100% height. Notice that the sidebars will be as height as the window itself, but your content at the middle can be taller than 100%... Fiddle
Dont know the 960 grid, the EDITED solution - using visibility: visible; -
HTML
<div id="box">
<div class="vision"> sdfsdfsd </div>
</div>
CSS
#box {
float: left;
border: 2px solid red;
}
.vision {
width: 300px;
height: 600px;
visibility: visible;
}
second try as I was unluck to explain the issue yesterday. I am trying to achieve the following layout in html/CSS:
The grey box is the 1040px wide centered site container. Above is a header with a much wider picture which shall grow to the right side in case of a larger screen resolution. How could I do this with CSS?
I know that I could calculate the left margin of the site container with javscript and dynamically set the left margin of the header, but I want a css solution.
Regards,
Martin
It's me again, I now finally understand what you mean.
The closest I've been able to get to what you want, is trying things out with percentages.
<div id = "header">
</div>
<div id = "sitecontainer">
</div>
CSS:
#header{
height: 200px;
width: 100%px;
background-color: black;
margin-left: 25%;
}
Try fiddeling around with those percentages until you hit a sweetspot that works for you.
To add; making 2 divs might even be better, something like this: http://puu.sh/3thxc/085a639816.png. But I can't seem to be able to place the second div (headerright) right next to header div.
I came up with a solution which is working but not the sweetest, so if you have a better approach, let me know:
body {
overflow-x: hidden;
}
#growing-header {
position: absolute;
left: 0;
width: 2400px;
background-color: #edf034;
}
#main {
position: relative;
background-color: #00aaff;
}
and the containers:
<body>
<div id="main">
<div id="growing-header">my header...</div>
<!-- some more divs, site-content,...</div>
</div>
</body>
Cheers,
Martin
How do I create a div that has a fixed height and stays on the bottom of the page, and another one above it occupying the remaining vertical space?
Something like this should achieve what you're looking for.
Try like this
See Demo
Use height: inherit for your first div which takes the remaining height available
html
<div id='container'>
<div id='first'>
First Div content
</div>
<div id='second'>
Second div content
</div>
</div>
Css
#container{
width: 600px;
height: 450px;
border: 1px solid black;
}
#second{
position: relative;
bottom: 100px;
height: 100px;
background-color: green;
}
#first{
height: inherit;
background-color: red;
}
I don't think any of the other examples really work nicely when the page is resized.
This type of thing is best accomplished with a few lines of javascript, as its not something that CSS does a great job of generally speaking.
See here for a working demo. mod.it requires that you view the demo in chrome but the code in the demo is cross browser and will work anywhere.
https://mod.it/6hQaRsEL
I understand that there are several questions here about this problem, but I have a rather unique predicament. I'm working on a template that has to include certain tags, and has to work with other elements that are added to the template after I upload the code. I wouldn't worry about this, but I am having a time trying to get the footer to display at the bottom of the page. I can't alter anything about the footer, and it displays at the bottom of the div I'm using as a wrapper. The problem is if I set the height to a fixed value, there can only be so many comments made before the comment div overlaps the footer. I've tried several different solutions including setting the container div's height to auto, overflow to auto, bottom margin to 65 (height of the footer), and setting the overflow to scroll for the Comments div (resulted in very loose comments).
Here is an example of the problem and the template as it stands.
Here is the CSS styling for the container div (div id=Main)
#Main {
margin: 0px auto auto auto;
background-color: #808080;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: medium;
font-variant: normal;
color: #FFFFFF;
width: 900px;
position: relative;
}
Here's the CSS styling for the Comments div
#Comments {
background-color: #008080;
width: 450px;
height: auto;
top: 1750px;
left: 450px;
position: absolute;
overflow: auto;
}
And here's how the divs are stacked in the body
<div id="Main">
...
<div id="Comment_Form">
<!--[COMMENT_FORM=400,200]-->
</div>
<div id="Comments">
<!--[COMMENTS=400]-->
Comments
</div>
</div>
Since the page is going to be image heavy, I'm trying to keep the code lightweight (and probably failing at it pretty badly).
Thank you for your help and I'll post the template as of now if anyone needs it.
EDIT:
Okay, it's occurred to me that a) I need to redo the CSS and the divs that I have down, and b) I have no clue how to do it using pure CSS, or at least with out fighting it as one of you has said. What I'm trying to achieve is this:
I have no clue How to do this. and any help would be greatly appreciated (as well as any way to avoid having each and every element in its own div)
You seem to be really fighting your CSS on that page. Most of your elements are positioned absolutely within your #Main class. This will force you to specify a lot more layout than you really want to. It also means that if you have a variable quantity of comments or dynamic content, you'll find it that much harder to expand your content containers without others getting in the way.
I would strongly urge you to look at CSS frameworks or approaches that take advantage of grid layouts such as Nicole Sullivan's OOCSS framework.
You'll find that the structure (which has plenty of good, workable examples) is easy to follow and lends itself much more readily to the sorts of layouts that you're trying to achieve.
I hope this is helpful.
Here is a very basic layout that you can use.
In your CSS:
#header, #content, #comments{
margin: 0 auto;
width: 960px;
overflow: hidden;
}
#author-comments{
width: 100%;
}
#comment-box{
float: left;
width: 50%;
}
#comment-list{
float: right;
width: 50%;
}
In your markup:
<div id="header">
Header
</div>
<div id="content">
Contents
<div>
<div id="comments">
<div id="author-comments">
Author comments
</div>
<div id="comment-box">
Comment box
</div>
<div id="comment-list">
Comment list
</div>
</div>
It's really important that you use markup that makes sense without the styles. Don't see divs as plain boxes but as actual content containers that give structure to your document.
On a side note, you mentioned that you were concerned about the ammount of divs to keep your file light, compensating for the amount of images you're using. Don't worry about this. Text documents (such as HTML) are nothing compared to images in terms of file size. However, his doesn't mean you should throw markup as if it was free ;)
One last thing. I noticed that you are using <img> elements to render your decoration images. Try using CSS to set them as background images in the corresponding <div>s. This not only will help you to make cleaner and easier to implement structures, but also will draw a line between the images that represent content and those that represent decoration.
I'll write without any testing how I would code the layout on your image:
HTML:
<div id="header" class="centered"></div>
<div id="content" class="centered">
<div id="navigation"></div>
<div id="content"></div>
</div>
<div id="comments" class="centered">
<div id="author-comments" class="centered"></div>
<div class="centered">
<div id="comment-field"></div>
<div id="user-comments"></div>
</div>
</div>
CSS:
* { margin:0px; padding:0px }
html { height:100% }
body { height:100% }
.centered { position:relative; margin:0 auto; width:960px }
#header { height:100px; background:#333 }
#content { overflow:hidden }
#author-comment { overflow:hidden; margin:30px auto }
#comment-field { position:relative; float:left; width:480px; overflow:hidden }
#user-comments { position:relative; float:left; width:480px; overflow:hidden }
Sorry, got no time to test now, but on first view, I don't see any problems with this code - write comments, if something doesn't work
I need a footer in the bottom of a page, which is overlaps any content that will make the page scroll. Also, when scrolling down, it the footer still need to stay there.
Is this possible with css only working for IE6+ ?
Recently I used the following style:
div.BottomDisclaimer
{
z-index:100;
position:fixed;
bottom:0px;
border-top-style: solid;
border-top-width: 1pt;
padding-top: 4px;
}
Do a quick google search for CSS footer, and you'll find plenty solutions. But most solutions seem to work like this:
<body>
<div id="wrapper">
Main content
</div>
<div id="footer">
Footer content
</div>
</body>
and then applying css:
body, html { height: 100% }
#wrapper { height: 100% }
#footer {
height: 150px;
margin-top: -150px;
}
For IE6, it's not possible to use position:fixed. You can use Dean Edwards' IE7 library to get that behavior if you want.
EDIT : because IE6 doesn't support position:fixed;, here's a good workaround.