How should i set a div's height to be what's left of the viewport from its start minus 20 pixels? Parent DIV is 100% of the viewport, and i need the child to expand until the parent's end.
Parent div's jquery:
$(document).ready(function(){
windowHeight = $(window).height() - 0;
$('.slide').css('min-height', windowHeight);
});
If I understand your question correctly, you have a parent div with a 100% height, and inside it you have something that's 20px high and then something that should stretch to the bottom? (Please be clear in your question, or include a code example as a jsfiddle and/or a screenshot).
Look at this simple example
<div class="wrapper">
<div class="header">
Heading
</div>
<div class="strecth">
Stretching content
</div>
</div>
The styles to achieve what I think you mean:
.wrapper {
height: 100%;
}
.header {
height: 20px;
}
.stretch {
height: 100%;
padding-top: 20px;
margin-top: -20px;
}
The padding of 20px is rendered as part of the 100%, so effectively the contents of your .stretch will be 100% - 20px high (which is what you want), but there is an offset of 20px (the padding) that pushes it down. Then I use the negative margin to undo the offset by pulling the div back up 20px. The effect is that the visible contents are exactly 100% - 20px of height, which is what you wanted.
See the live code (I added some colors for emphasis, and had to set some extra height to body and html because jsFiddle will not do that automatically, you should not need that):
]http://jsfiddle.net/48aET/
Related
I am currently working on a single page application with angular-js. I have specific routes where I want to inject some new html templates.
To do this I created a container called with id #main which is located between two navbars (header and footer). In addition I have an image as background which is included in a seperate div above all other html elements in body.
So the structure looks like this:
<body ng-controller="mainController">
<div id="background"></div>
<div id="navbar-override" ...> ... </div>
<div id="main" ng-view></div>
<div id="navbar-bottom-override" ...> ... </div>
</body>
My question now is: The #main div should always stay at the same height and width (full available h&w) over the whole page. I have a picture where I describe how the #main div should behave with the rest of the page. How can I achieve this alignment?
P.S.: This is the css of the html tag:
html {
height: 100%;
width: 100%;
padding: 65px;
}
Your #main div should natively stretch to the width of the screen (minus the 65px padding on each side coming from the html, although I would remove that padding and put it as margin on the #main since it looks like you want the header and footer to stretch full). If you want to force the height of #main to the screen height you should be able to set its height to 100vw minus the heights of your header and footer. If your header and footer are each 50px height:
#main {
height: calc(100vw - 100px);
padding-left: 65px;
padding-right: 65px;
}
You have to define style for your main:
#main{
width: ---something-----;
height: ---something-----;
display:block;
}
Then you probably want deal with overflow content. See ,w hat it does: http://www.w3schools.com/cssref/pr_pos_overflow.asp
You may also use css capability of calculating the dimensions:
height: calc( 100% - 100px );
where 100px would be combined height of your header and footer, as an example.
I'm working on some jquery code using the scrollTop method to implement an infinite scroll (please, don't suggest jQuery plugins, I know they exist) and I don't quite understand what this value means.
Given this fiddle: https://jsfiddle.net/ve8s5fdx/
<div id="outter">
<div class="inner"></div>
<div class="inner"></div>
</div>
<div id="scroll"></div>
#outter {
height: 100px;
width: 100%;
overflow-y:auto;
}
.inner {
height: 150px;
width: 50%;
border: dashed black 2px;
background-color: grey;
}
It makes sense that the value is 0 when the scrollbar is at the very top of the element, but why "208" when it's at the bottom ? The #outter div is 100px high, its content a bit more than 300px.
What #Rory McCrossan said.
If you scrolled down 100px, the .scrollTop will display 100.
The scrollTop will measure the space between the window and the element. So it doesn't matter how high your element is, it will always be the space above it that counts.
Since your .inner is missing the css-rule box-sizing: border-box; the border will be added outside the div, and it's 2px wide. Which in your case means that every .inner element is 154px high. You have 2 of those, so the content of .outer is 308px.
Your .outer-element is 100px high so 100px will always be visible. So when your window is scrolled to the very bottom, the scrollTop displays 308px - 100px = 208px.
If you change your .outer to the height of 50px, the scrollTop will display 258px when scrolled to the bottom.
$.scrollTop:
The vertical scroll position is the same as the number of pixels that
are hidden from view above the scrollable area. If the scroll bar is
at the very top, or if the element is not scrollable, this number will
be 0.
Inspecting your fiddle, you can see that your two .inners have a combined height of 308 px. Your outer (scrolling) div is 100 px tall.
So your .scrollTop(), the number of pixels that are hidden from view above the scrollable area is total inner height - visible height, or 208 px.
I am trying to create a fixed div in the middle of a page that is scrollable, but I'm not able to get the div to scale to the page size properly. It's set to take 70% of the page (AKA, stopping around 20px from the bottom of the browser) but when you make the height of the browser less, it doesn't seem to react properly.
I can't seem to figure out why this is, suspect it's related to fixed positioning a div and then attempting to use a percentage height but I am sure there is a way around it.
To see what I mean, there is an example website here for this. Drag the window up from the bottom and eventually the div does not resize anymore. :(
The CSS for the div is:
.singlepost {
position: fixed;
height: 70%;
background-color: white;
padding-left: 10px;
padding-right: 10px;
overflow-x: hidden;
}
And the structure of the HTML is:
<div class="container">
<div class="container">
[This is the fixed width box I want to size]
</div>
</div>
One idea I had was to use javascript to determine the height of the browser dynamically and set the fixed with to a specific pixel height but I doubt that's the best way to solve this.
Your page is calculating the height of the .singlepost div correctly. It is always 70% and it is adjusting when the page height gets smaller.
The problem is the .singlepost div sits after some content that is a fixed height. So when the content above the .singlepost div is greater than 30% of the page height, the .singlepost div does not exceed the bottom of the page. But when you make the page height smaller, the top content gets less than 30% of the page, and at that point the bottom of the .singlepost div will drop under the bottom of the page.
Rather than setting the height, you can set the top and bottom:
CSS
.singlepost {
position: fixed;
background-color: white;
padding-left: 10px;
padding-right: 10px;
overflow-x: hidden;
top: 270px;
bottom: 20px;
}
This assumes that your top content is 270px high.
Centering an element only when screen is at max width
At the moment, I am centering various elements (by JavaScript) by calculating the screen's width and setting the element's "margin-left" to screen.width/2 - element.width/2.
I do this so that when the user resizes the window, the element will stay in the absolute center of the screen and become invisible if the window is resized to less than 50%.
Is this a typical way to center things only at the max width, or is there a simpler CSS approach to achieving the same effect?
An example of the effect I am trying to achieve: Khanacademy.com's logo.
[Edit]
Thanks to hungerstar, I was able to figure out the root cause of my issue. If you do not set a min-width, then margin: 0 auto will always keep your element centered.
For block elements, giving an explicit width plus margin: 0 auto is the basic technique. Inline (and inline-block) elements such as images you can center using text-align:center on the parent container.
If you have a group of elements that need to be centered but need to maintain left alignment or other formatting, i.e. a heading followed by paragraphs with lists, you can do the following:
HTML
<div id="wrapper">
<div class="outer">
<div class="inner">... Content...</div>
</div>
</div>
CSS
#wrapper {
margin: 0 auto;
width: 900px;
}
.outer {
height: 50px;
left: 50%;
position: relative;
display: inline-block; /* or float: left; */
}
.inner {
right: 50%;
position: relative;
}
You can achieve this using css.
margin: 0 auto;
EXAMPLE
The problem is: I have a huge background image and content with those characteristics:
the content is centered with margin: auto; and it has a fixed width
the position of the content is in relation to the image (like it fits in the middle of the image)
this connection is only horizontally (vertical scrolling moves everything around as expected)
This works fine, actually, on desktop devices with position fixed on the background image.
But the problem is: When I resize the window until it's smaller than the content, the content is fixed on the left side, but the background image is still centered, as expected. In this case the connection between both elements gets lost.
I have this JavaScript that does the trick, but this is of course some overhead I want to avoid as it isn't smooth anytime due to the calculation:
$(window).resize(function(){
container.css('left', (body.width() - img.width()) / 2);
});
I also tried things like that:
<div id="test" style="
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%:
height: 100%;
background: transparent url(path) no-repeat fixed center top;
"></div>
But this results in the same issue described above.
Is there any elegant CSS solution for this problem?
Demo
Try it yourself
NOTE
The image size is fixed and known and it never gets scaled by the browser.
Is this working for you? http://jsfiddle.net/wPmrm/24/
HTML
<div class="background">
<div class="content">
CONTENT
<br><br>
This example works fine until you the viewport size gets smaller than this content. After that the image isn't sticky anymore.
<br><br>
And check out vertical scrolling.
<div style="height:1500px;"></div>
END
</div>
</div>
CSS
div.background {
min-width: 740px;
background: url('http://placehold.it/1600x1050') top center fixed no-repeat;
}
div.content {
width: 700px;
height: 2000px;
margin: auto;
padding: 50px 20px;
background: none;
opacity: 0.7;
color: #333;
}
.background should be the wrapper for .content with a centered background and have a minimum-width of the .contents width+padding.
Update from comments:
http://jsfiddle.net/wPmrm/28/
We'll have to use a media-query, so when the width is at max 740px we change the background position. Oh and we set background-attachment to fixed again.
CSS added
#media screen and (max-width:740px) {
div.background {
background-position: -435px 0;
}
}
I don't see why it is -435px ((1600-740)/2 would be 430) but it seems to be the most accurate value.