I want to place an element to its parent bottom. I can't set its position: absolute and bottom: 0 because my parent div may be scrolled(overview-y) by zooming or in smaller displays. I want the element to be stuck at the bottom of the parent if the parent other elements do not exceed the widow height, otherwise this child be the last in scrolling.
how is that possible? should I use js or is there anyway to do it by css?
tnx
You can use a child content container with min-height set to match the parent's height. Put enough padding on the bottom of the content element for your footer and use position:absolute to attach your footer to the bottom.
See the snippet below.
$('.toggle').on('click', function() {
$('.grey').toggleClass('big');
});
.parent {
border: 1px solid black;
overflow: auto;
height: 400px;
}
.content .grey {
height: 40px;
margin-bottom: 5px;
background: grey;
}
.content .grey.big {
height: 80px;
margin-bottom: 5px;
background: grey;
}
.content footer {
height: 40px;
background: orange;
position: absolute;
bottom: 5px;
left: 5px;
right: 5px;
}
.content {
position: relative;
min-height: 100%;
box-sizing: border-box;
padding: 5px 5px 45px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<button class="toggle">Toggle</button>
</p>
<div class="parent">
<div class="content">
<div class="grey"></div>
<div class="grey"></div>
<div class="grey"></div>
<div class="grey"></div>
<div class="grey"></div>
<div class="grey"></div>
<footer></footer>
</div>
</div>
hope this will help
/**
* Demo Styles
*/
html {
height: 100%;
box-sizing: border-box;
}
body {
position: relative;
margin: 0;
padding-bottom: 6rem;
min-height: 100%;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.demo {
margin: 0 auto;
padding-top: 64px;
max-width: 640px;
width: 94%;
min-height:1000px;
}
.demo h1 {
margin-top: 0;
}
/**
* Footer Styles
*/
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
<div class="demo">
<h1>CSS “Always on the bottom” Footer</h1>
<p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>
<p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>
<p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>
<p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>
<p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>
<p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute;</code>.</p>
</div>
<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
Related
I have some web page to fetch the user related data and huge count of images. The problem is while load the page it took more time due to images , Images are rendered in separate div in the page. So i want loader spinner for that particular div.
Note: I know how to implement for page load. Just need for particular div.
Just look the below my implementation idea.
<body>
<div id="divUserContent">
</div>
<div id="divuserimages">
</div>
</body>
Just make sure the parent element to the loading element has a position set to relative. See this example below.
body {
margin: 0px;
font-size: 16px;
}
.container {
background: rgba(0,0,0,.2);
height: 100vh;
align-items: center;
justify-content: center;
display: flex;
position: relative;
}
.loading-container {
padding: 10rem;
border: 1px solid #000;
position: relative; /* this keeps .loading-text inside it */
width: 5rem;
}
.loading-text {
position: absolute;
top: 50%;
left: 50%;
margin-top: -9px; /* take .loading-text height, divide by -2 */
margin-left: -35px; /* take .loading-text width, dividide by -2*/
}
<div class="container">
<div class="loading-container">
<div class="loading-text">Loading...</div>
</div>
</div>
I've this code here (Please open in expanded mode):
#wrapper {
position: fixed;
background: gray;
color: #fff;
bottom: 0;
left: 0;
right: 0;
border-radius: 12px 12px 0 0;
width: 100%;
}
#title {
text-align: center;
padding: 15px;
border-bottom: 1px solid white;
}
#notifications {
display: flex;
flex-direction: column;
overflow: scroll;
overflow-x: hidden;
}
.entry {
padding: 15px;
}
<div id="wrapper">
<div id="title">Notifications</div>
<div id="notifications">
<div class="entry">Test</div>
<div class="entry">Test</div>
<div class="entry">Test</div>
<div class="entry">Test</div>
<div class="entry">Test</div>
<div class="entry">Test</div>
<div class="entry">Test</div>
</div>
</div>
It should be like in Google Maps when you explore the nearby. So like a slide up div from the bottom. The title should be visible when it's not expanded but not the notifications. When I click the title, I want to smoothly expand the element up to 85 percent of the viewport so that the user can scroll trough the notifications. When he clicks the title again, it should go back down to the initial state.
Is this possible? If yes, how?
To change between two states, expanded and collapsed, you'll need some kind of JavaScript.
As far as the CSS, I'd suggest for #wrapper instead of using bottom: 0, using something like top: calc(100% - 42px) (the 42px should be whatever the height you want to be visible) for the collapsed state, and then top: 15% for the expanded state.
For the "smooth" part of it, you just need to add a transition animation.
Here's a basic codepen showing what I mean: https://codepen.io/milesgrover/pen/gOpbrpd
There are lots of fixed footer/header variable width content posts but none seem to work for my specific use case.
The easiest way to describe what I want is a google doc's style interface where the header and footer are fixed and the content is X/Y scrollable but was part of the header scrolls away when you start scrolling down
https://jsfiddle.net/zve0mb5m/
HTML, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
div {
padding: 10px;
}
.header {
background: LightCoral;
border: 10px solid IndianRed;
}
.fixed-header {
position: sticky;
top: 0px;
background: Gold;
border: 10px solid GoldenRod;
}
.content {
overflow-y: scroll;
overflow-x: scroll;
height: 100%;
background: YellowGreen;
border: 10px solid OliveDrab;
}
.fixed-footer{
position: fixed;
bottom: 0px;
background: LightSteelBlue;
border: 10px solid SteelBlue;
width: 100%;
}
<div class="header">
<h1>Non fixed header content</h1>
</div>
<div class="fixed-header">
Fixed header content
</div>
<div class="content">
Some content that will overflow horizontally aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div class="fixed-footer">
Fixed footer content
</div>
The above fiddle is what I have so far, in a working solution the border for the green content section would appear just above the blue footer which would allow the horizontal scroll bar to be present.
Also, when scrolling the content section goes underneath the fixed header which isn't ideal. I want the content section to be fully visible at all times, and grow as we scroll. Possible with CSS? Do I need some JS in here?
You can wrap the fixed items in a container div and use flexbox to lay them out the way you want: http://jsfiddle.net/38m5d13r/
I have a header div that contains logo and a navigation menu
Lets say I have a logo on the left hand side 100x50 and a navigation menu that should float: right
How do I get the navigation menu to align just above the base of the header div?
What happens if the logo size changes, can it be done with respect to the logo size without having to adjust the margin-top for the nav element?
HTML
<div class="container">
<header class="site-header">
<div class="site-logo">
</div><!-- /site-logo -->
<nav class="site-nav">
</nav>
</header>
</div>
CSS
.site-header nav ul {
float: right;
border: 1px solid green;
}
div.site-logo {
float: left;
width: 100px;
height: 50px;
border: 1px solid #000;
}
P.S.: If it can be done without javascript, it would be nice
I will give you an example with flexbox. It's way much easier than with position absolute, and you don't need to worry about the logo size.
.site-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 500px;
height: 50px;
border: 1px solid #000;
}
div.site-logo {
width: 100px;
height: 50px;
background-color: #00f;
}
div.site-nav {
width: 300px;
height: 25px;
background-color: #f00;
z-index: 1;
}
<div class="container">
<header class="site-header">
<div class="site-logo"></div><!-- /site-logo -->
<div class="site-nav"></div>
</header>
</div>
If you use flex, you may need to add the property names for other browser.
To use absolute positioning for your nav, your header needs relative positioning:
header { position: relative; }
then something like:
.site-header nav ul {
position: absolute;
right: 5px; /* or whatever you choose */
bottom: 5px; /* or whatever you choose */
}
Here is a simple way how to implement it: JSFiddle example
.site-header {
width: 500px;
height: 50px;
border: 1px solid black
}
div.site-logo {
display: inline-block;
width: 100px;
height: 50px;
background-color: blue;
}
div.site-nav {
display: inline-block;
width: 300px;
height: 25px;
background-color: red;
float: right;
margin-top: 4.2vh;
}
If you do not want to use flex. The simplest approach is to add padding for the nav element.
padding top
+
nav height
+
padding top
the total height equal to the height of the header bar.
To align something to the bottom of an element, set the position of that thing to absolute and it's bottom coordinate to 0, so that there will be zero pixels between that thing and the bottom border of the containing element.
.site-header nav {
position: absolute;
bottom: 0; // Aligned to parent's bottom border...
right: 0; // ...and parent's right border.
}
Note that you can position something absolutely only in a positioned parent, either absolutely:
.site-header {
position: absolute;
}
...or relatively, where you have make sure to enforce a Block Formatting Context (BFC) to hold your contents (logo + menu), typically by specifying the overflow behavior of your relative parent to anything but visible:
.site-header {
position: relative;
overflow: hidden; // Enforce BFC
}
Here is a pure CSS demo that shows that it will fit any logo size.
There's a mysterious whitespace along the right of my site in firefox (on both PC and Mac, latest versions) and I can't for the life of me figure out what's causing it.
This is what it looks like -
I've been searching the CSS for ages now trying to figure out if it's some margin or padding issue but I can't find anything.
Also, if I remove the div ID 'slider3' the issue seems to disappear, yet I can't figure out how this div is causing the whitespace, since it has no CSS applied to it - it's simply a container.
Here's my site http://www.simplerweb.co.uk
Here's some relevant code so the answer is useful for people later on.
<div class="fullw">
<div class="sliderleft"></div>
<div class="sliderright"></div>
<div id="slider3">
<div class="quote">
<div class="centmid">
<h1 class="fronth">Hello</h1>
<h2 class="frontp">Welcome to Simpler Web</h2>
<h2 class="frontp2">We're an Edinburgh based Web<br> Design Agency</h2>
</div><!-- end div centmid -->
</div> <!-- end div quotes1 -->
<div class="quote2">
<div class="centmid">
<h2 class="frontb">We make wonderful, cross platform <br> accessible Websites </h2>
</div> <!-- end div centmid -->
</div> <!-- end div quotes2 -->
<div class="quote3">
<div class="centmid">
<h2 class="frontc">We can translate your ideas into reality </h2>
</div> <!-- end div centmid -->
</div><!-- end div quotes3 -->
</div> <!-- #slider3 -->
</div>
CSS
/* The following styles are essential to the slider's functionality */
.plusslider {
overflow: hidden;
position: relative;
padding-top: 140px; /* The height / width of the slider should never be set via the CSS. The padding increases the slider box-model while keeping it dynamic */
}
.plusslider-container { position: relative; }
/* Slides must have a set width - even though they may be dynamic. If no width is set on <img> slides, the default image size will be assumed */
div.child { width: 480px; }
.plusslider .child { float: left; }
/* PlusFader Specific (not needed with plustype:slider */
.plustype-fader .child { display: none; position: absolute; left: 0; top: 0; }
.plustype-fader .current { z-index: 5; }
/* End PlusFader Specific */
/* No-javascript fallback -- change "#slider" and "#slider2" identifiers as needed for your html */
#slider > * { display: none; }
#slider > *:first-child, #slider2 > *:first-child { display: block; }
/* End no-javascript fallback */
/* End essential styles*/
/* The following styles are not essential for slider functionality. They are specific to the example content.
It is important to note that the fading effect does not work correctly with non-image content unless that
content area has a solid background (either a background image or a background-color, but not transparent).
Slides to not have to be the same width or height, but if you'd like a consistent width and/or height, make sure to set that within the CSS! */
#slider .slide1 { padding-left: 40px; padding-right: 40px; margin-left: 0; margin-right: 0; }
#slider .slide1 { height: 210px; padding-top: 20px; padding-bottom: 20px; margin-top: 0; margin-bottom: 0; }
.slide1 { height: 500px; padding: 20px 40px; }
.slide1 h2 { color: #fff; font-size: 20px; margin: 0 0 20px 0; text-align: left; }
.slide1 p { border-left: 3px solid #fff; color: #fff; padding: 0 0 0 10px; }
.quote, .quote2, .quote3 { height:400px; padding: 20px 0; width: 980px; width: 100%; position: relative; }
.quote { background-image: url(../images/weare.png); background-position: center; background-repeat: no-repeat; }
.quote2 { background-image: url(../images/headlogosandroid.png); background-position: center; background-repeat: no-repeat; }
.quote3 { background-image: url(../images/ideafront.png); background-position: center; background-repeat: no-repeat; }
.plusslider a img { border: none; } /* Prevent blue borders in IE (not only does it look ugly, but it messes up spacing which breaks the "slider" type */
.plusslider-pagination { position: absolute; left: 0; bottom: 0; }
.plusslider-pagination li { float: left; list-style: none; margin-left: 5px; }
#slider3 {margin: 0; padding: 0;}
You have (in FF) exactly 17px extra width that is exactly the width of the browser scrollbar.
Your starting (initial) loading black screen (that animates) leaves a glitch of 17px:
cause it's animation maintains the DOM width that equals the screen width without the right scrollbar (100% screen width).
After the page is fully loaded and the scrollbar is added to the page, it actually adds the extra 17px (to the 100%) width that were maintained by the Loading animation.
Hope I put you in the right direction.
By the way, try to add:
html {
overflow-y: scroll;
}
and - if still needed - adjust the loading element width as I mentioned before.
Add this:
body{
overflow-x: hidden;
}
Problem solved. (temporarily)
So where is the problem?
It is at your <div> with the classes plusslider slider3 plustype-slider. You are constantly setting an incorrect width to it. You have to subtract the scrollbar width.
You can also try to do this: Padding: 0px(or whatever) 17px; and margin: 0px(or whatever) -17px; now your whitespace at the sides are gone.