Responsive Css: Fixed Left Sidebar and Footer conflict in small screens - javascript

I need your help about this complex problem.
I have fixed header,left Sidebar and absolute sticky footer, and if the content height is smaller than browser's height, no scrolls are visible.
Html
<header></header>
<div class="container">
<div class="aside-left">
<p>sdfsdfs</p>
<p>sdfsdfs</p>
<p>sdfsdfs</p>
<p>sdfsdfs</p>
<p>sdfsdfs</p>
<p>sdfsdfs</p>
<p>sdfsdfs</p>
<p>sdfsdfs</p>
<p>sdfsdfs</p>
<p>sdfsdfs</p>
<p>sdfsdfs</p>
<p>sdfsdfs</p>
</div>
<div class="container-mid"></div>
<div class="push"></div>
<footer></footer>
</div>
Css
html, body {
height:100%;
background:#ffaaaa;
margin:0;
}
header {
background: #2f3d4c;
overflow: hidden;
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 600;
width: 100%;
height: 75px;
}
.container {
min-height:100%;
position:relative;
}
.aside-left {
background-color: rgba(255, 255, 255, 0.8);
position: fixed;
left: 0;
top: 75px;
min-height: 100%;
width: 192px;
overflow: hidden;
z-index: 50;
}
.container-mid {
margin-left: 192px;
padding-top: 75px;
}
.push, footer {
height: 55px;
}
footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
color: #ffffff;
width: 100%;
background: #2f3d4c;
z-index: 100;
}
#media only screen and (max-height: 690px) {
.aside--left {
position: absolute;
margin-bottom: -75px;
float: left;
margin-right: -100%;
}
}
Everything is ok in large screens, but when screen height is smaller, and the content of Left Sidebar is higher than container height, footer is overlapping Left Sidebar's content and some part of it is not visible (See the fiddle).
I need this to work also in IE8+ and keep absolute position for left Sidebar when browser height is small, so that left sidebar will be strached from top to bottom (as I did in media query).
Solution can include JS too, no matter.
Fiddle : http://jsfiddle.net/frontDev111/dqd2f2dt/1/

If I understood it right you're trying to achieve something like this.
I fixed the footer with position: fixed and added overflow: auto (to show scrollbars if needed since you hid them) as well as bottom: 55px (footer-height) to your left sidebar.
http://jsfiddle.net/dqd2f2dt/4/
(I filled it with testdata content to test how the content itself does its job)
I tested this with IE9 and it worked properly.

Related

Is there a way to mask a sticky element using an absolute element?

I've been trying to create a sticky position image that changes as it scrolls across the border between two sections of my page. So basically, there should be two sticky position images, the top one gets masked by the bottom section and the bottom gets masked by the top section. I am having trouble figuring out a way to mask both images at the same time (you can use the bottom section div to hide the top image, and vice versa, but not both at the same time).
Here's an image to illustrate what I'm trying to do
Here's the code I'm using:
.lblue {
height: 40vh;
width:10vw;
position: -webkit-sticky;
position: sticky;
top:30vh;
left:45vw;
background:lightblue;
}
.lred {
height: 40vh;
width:10vw;
position: -webkit-sticky;
position: sticky;
top:30vh;
left:45vw;
background:lightcoral;
}
.blue {
position: absolute;
top:0;
height:150vh;
width:100vw;
background:blue;
}
.red {
position: absolute;
top:100vh;
height:100vh;
width: 100vw;
background:red;
}
<div class="blue">
<div class="lblue"></div>
</div>
<div class="red">
<div class="lred"></div>
</div>
Thank you!
Here’s a solution. The trick is to use the images as CSS backgrounds, because CSS backgrounds can be easily fixed in the viewport of their parents.
.blue {
position: absolute;
top:0;
height:150vh;
width:100vw;
background: blue fixed linear-gradient(lightblue, lightblue) 45vw 30vh / 10vw 40vh no-repeat;
}
.red {
position: absolute;
top:100vh;
height:100vh;
width: 100vw;
background: red fixed linear-gradient(lightcoral, lightcoral) 45vw 30vh / 10vw 40vh no-repeat;
}
<div class="blue"></div>
<div class="red"></div>
In this solution, you can replace linear-gradient(color, color) by the URL of your image, using url(https://…). I used gradients because, for the browser, gradients are (generated) images. So, this trick actually works with images.
The position: absolute also becomes useless, at least for the demo.
The long background rule may need some explanations. background is a shorthand (= a short way to write several properties in a single line) for:
background-color: red;
background-attachement: fixed;
background-image: linear-gradient(lightcoral, lightcoral);
background-position: 45vw 30vh;
background-size: 10vw 40vh;
background-repeat: no-repeat;
position:fixed can do this if you conside a clip-path trick to hide the overflow so that each element will show only inside its section
.lblue,
.lred {
height: 40vh;
width: 10vw;
position: fixed;
top: 30vh;
left: 45vw;
background: lightblue;
}
.lred {
background: lightcoral;
}
.blue,
.red {
height: 100vh;
background: blue;
clip-path: inset(0 0 0 0); /* this is important */
}
.red {
background: red;
}
body {
margin: 0
}
<div class="blue">
<div class="lblue"></div>
</div>
<div class="red">
<div class="lred"></div>
</div>

can't affix footer when using mmenu

I have a problem. When coding the side pages of the site, I can not tie the footer to the basement of the site. I use bootsrap classes. When trying to use such code:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
the footer either remains in place, or it closes the content, approaching the navigation bar.
How can this problem be solved?
before
https://i.stack.imgur.com/qeg7Q.png
after use the code
https://i.stack.imgur.com/XnnaS.png
P.S. I apologize for bad english
Height of 100% doesn't work like you think it would. In this case, you're looking for vh units. I would also apply them to body, not html.
*{box-sizing: border-box;}
body {
/* Margin bottom by footer height */
margin: 0;
padding: 0;
min-height: 100vh;
position: relative;
}
footer {
position: absolute;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
bottom: 0;
}
<body>
content
<footer>
footer
</footer>
</body>

Fix the alignment of div in any screen resolution

Here is the HTML code
.Box {
position: absolute;
bottom: 60px;
right: 0px;
left: 65px;
display: block;
background-color: #fedd2d;
max-width: 60%;
padding: 15px;
opacity: 0.8;
}
<div class="Box">
<div class="Boxtitle">Hello</div>
<div class="Boxsubtitle">Subtitle</div>
</div>
When I view this box on larger resolution (2560*1440) it expands both right side and left side. I tried using the width attribute which fixes the box from right side but the fix width hinders the responsiveness and the box width doesn't change with the length of the text within.
How can I make this Box div stay in same position in any screen size using either CSS or Javascript, also making it responsive as per the length of the content in it?
Just need to remove the right and max-width and then the width will adjust based on the content.
.Box {
position: absolute;
bottom: 60px;
left: 65px;
display: block;
background-color: #fedd2d;
padding: 15px;
opacity: 0.8;
}
right:0; seems to be in the way. it will pull container all the way to right side, but max-width is set too, so it stops at 60% of width as set. You rules are not coherent together.
since absolute, display is not really needed.
unless i missunderstand and max-width is in the way , ... or else ?
.Box {
position: absolute;
bottom: 60px;
left: 65px;
background-color: #fedd2d;
max-width: 60%;
padding: 15px;
opacity: 0.8;
}
<div class="Box">
<div class="Boxtitle">Hello</div>
<div class="Boxsubtitle">Subtitle</div>
</div>
`

align texts or images in Bootstrap carousel

I use Bootstrap 3.3.4 and I want to know which way is better to align texts or items in carousel.
here is a exemple from a slider. How can I align text like this and stay at any screen resolution at the same place. I use top: x, right: x but every time when I resize the window, text climb above and not stay at middle anymore.
CSS for align
.carousel-caption {
position: absolute;
right: 15%;
bottom: 40%;
left: 15%;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
Just basic bootstrap slider. But If I use bottom 40% for exemple to rise text at middle of the page works. But if I use smaller displays the text rise and stay almost on top.
In this exemple text stay fixed on every device.
<div class="wrap">
<div class="display-table">
<div class="display-cell">
<h1>Title in here</h1>
</div>
</div>
</div>
<style>
.wrap {
width: 100%;
height: 400px;
}
.display-table {
width: 100%;
height: 100%;
display: table;
}
.display-cell {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
</style>
This allows fixed vertical alignment and should work cross browser. Just note the fixed height applied to .wrap must be present for the children to inherit 100% height!
Hope this helps :)
Hope, Try this demo that centers text vertically in the Bootstrap carousel.
Here is the Fiddle.
All I do here is give the div a height that contains the text and then position it with this css...
.vcenter {
position: absolute;
height:100px;
width:100%;
top:50%;
bottom:50%;
margin-top: -50px;
margin-bottom: -50px;
}

How to make the main content div fill height of screen with css [duplicate]

This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 8 years ago.
So I have a webpage with a header, mainbody, and footer.
I want the mainbody to fill 100% of the page (fill 100% in between footer and header)
My footer is position absolute with bottom: 0. Everytime I try to set the mainbody to 100% height or change position or something it will also overflow the header. If if set the body to position absolute with top: 40 (cause my header is 40px high), it will just go 40px too far down, creating a scroll bar.
I created a simple html file since i cannot actually post the entire page/css from the actual project. With the sample code, even though the maincontent body fills the screen, it goes 40px too far down (cause of the header I assume).
html,
body {
margin: 0;
padding: 0;
}
header {
height: 40px;
width: 100%;
background-color: blue;
}
#maincontent {
background-color: green;
height: 100%;
width: 100%;
}
footer {
height: 40px;
width: 100%;
background-color: grey;
position: absolute;
bottom: 0;
}
<html>
<head>
<title>test</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header></header>
<div id="maincontent">
</div>
<footer></footer>
</body>
</html>
Anyone knows the answer?
These are not necessary
remove height in %
remove jQuery
Stretch div using bottom & top :
.mainbody{
position: absolute;
top: 40px; /* Header Height */
bottom: 20px; /* Footer Height */
width: 100%;
}
check my code : http://jsfiddle.net/aslancods/mW9WF/
or check here:
body {
margin:0;
}
.header {
height: 40px;
background-color: red;
}
.mainBody {
background-color: yellow;
position: absolute;
top: 40px;
bottom: 20px;
width:100%;
}
.content {
color:#fff;
}
.footer {
height: 20px;
background-color: blue;
position: absolute;
bottom: 0;
width:100%;
}
<div class="header" >
</div>
<div class="mainBody">
<div class="content" >Hello world</div>
</div>
<div class="footer">
</div>
No Javascript, no absolute positioning and no fixed heights are required for this one.
Here's an all CSS / CSS only method which doesn't require fixed heights or absolute positioning:
/* Reset */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
/* Essentials */
.container {
display: table;
}
.content {
display: table-row;
height: 100%;
}
.content-body {
display: table-cell;
}
/* Aesthetics */
.container {
width: 100%;
height: 100%;
}
.header,
.footer {
padding: 10px 20px;
background: #f7f7f7;
}
.content-body {
padding: 20px;
background: #e7e7e7;
}
<div class="container">
<header class="header">
<p>This is the header</p>
</header>
<section class="content">
<div class="content-body">
<p>This is the content.</p>
</div>
</section>
<footer class="footer">
<p>This is the footer.</p>
</footer>
</div>
The benefit of this method is that the footer and header can grow to match their content and the body will automatically adjust itself. You can also choose to limit their height with css.
There is a CSS unit called viewport height / viewport width.
Example
.mainbody{height: 100vh;} similarly html,body{width: 100vw;}
or 90vh = 90% of the viewport height.
**IE9+ and most modern browsers.
This allows for a centered content body with min-width for my forms to not collapse funny:
html {
overflow-y: scroll;
height: 100%;
margin: 0px auto;
padding: 0;
}
body {
height: 100%;
margin: 0px auto;
max-width: 960px;
min-width: 750px;
padding: 0;
}
div#footer {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
height: 60px;
}
div#wrapper {
height: auto !important;
min-height: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
div#pageContent {
padding-bottom: 60px;
}
div#header {
width: 100%;
}
And my layout page looks like:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="pageContent"></div>
<div id="footer"></div>
</div>
</body>
</html>
Example here: http://data.nwtresearch.com/
One more note, if you want the full page background like the code you added looks like, remove the height: auto !important; from the wrapper div: http://jsfiddle.net/mdares/a8VVw/
Using top: 40px and bottom: 40px (assuming your footer is also 40px) with no defined height, you can get this to work.
.header {
width: 100%;
height: 40px;
position: absolute;
top: 0;
background-color:red;
}
.mainBody {
width: 100%;
top: 40px;
bottom: 40px;
position: absolute;
background-color: gray;
}
.footer {
width: 100%;
height: 40px;
position: absolute;
bottom: 0;
background-color: blue;
}
JSFiddle
Well, there are different implementations for different browsers.
In my mind, the simplest and most elegant solution is using CSS calc(). Unfortunately, this method is unavailable in ie8 and less, and also not available in android browsers and mobile opera. If you're using separate methods for that, however, you can try this: http://jsfiddle.net/uRskD/
The markup:
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
And the CSS:
html, body {
height: 100%;
margin: 0;
}
#header {
background: #f0f;
height: 20px;
}
#footer {
background: #f0f;
height: 20px;
}
#body {
background: #0f0;
min-height: calc(100% - 40px);
}
My secondary solution involves the sticky footer method and box-sizing. This basically allows for the body element to fill 100% height of its parent, and includes the padding in that 100% with box-sizing: border-box;. http://jsfiddle.net/uRskD/1/
html, body {
height: 100%;
margin: 0;
}
#header {
background: #f0f;
height: 20px;
position: absolute;
top: 0;
left: 0;
right: 0;
}
#footer {
background: #f0f;
height: 20px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
#body {
background: #0f0;
min-height: 100%;
box-sizing: border-box;
padding-top: 20px;
padding-bottom: 20px;
}
My third method would be to use jQuery to set the min-height of the main content area. http://jsfiddle.net/uRskD/2/
html, body {
height: 100%;
margin: 0;
}
#header {
background: #f0f;
height: 20px;
}
#footer {
background: #f0f;
height: 20px;
}
#body {
background: #0f0;
}
And the JS:
$(function() {
headerHeight = $('#header').height();
footerHeight = $('#footer').height();
windowHeight = $(window).height();
$('#body').css('min-height', windowHeight - headerHeight - footerHeight);
});
Not sure exactly what your after, but I think I get it.
A header - stays at the top of the screen?
A footer - stays at the bottom of the screen?
Content area -> fits the space between the footer and the header?
You can do this by absolute positioning or with fixed positioning.
Here is an example with absolute positioning: http://jsfiddle.net/FMYXY/1/
Markup:
<div class="header">Header</div>
<div class="mainbody">Main Body</div>
<div class="footer">Footer</div>
CSS:
.header {outline:1px solid red; height: 40px; position:absolute; top:0px; width:100%;}
.mainbody {outline:1px solid green; min-height:200px; position:absolute; top:40px; width:100%; height:90%;}
.footer {outline:1px solid blue; height:20px; position:absolute; height:25px;bottom:0; width:100%; }
To make it work best, I'd suggest using % instead of pixels, as you will run into problems with different screen/device sizes.
Relative values like: height:100% will use the parent element in HTML like a reference, to use relative values in height you will need to make your html and body tags had 100% height like that:
HTML
<body>
<div class='content'></div>
</body>
CSS
html, body
{
height: 100%;
}
.content
{
background: red;
width: 100%;
height: 100%;
}
http://jsfiddle.net/u91Lav16/1/
Although this might sounds like an easy issue, but it's actually not!
I've tried many things to achieve what you're trying to do with pure CSS, and all my tries were failure. But.. there's a possible solution if you use javascript or jquery!
Assuming you have this CSS:
#myheader {
width: 100%;
}
#mybody {
width: 100%;
}
#myfooter {
width: 100%;
}
Assuming you have this HTML:
<div id="myheader">HEADER</div>
<div id="mybody">BODY</div>
<div id="myfooter">FOOTER</div>
Try this with jquery:
<script>
$(document).ready(function() {
var windowHeight = $(window).height();/* get the browser visible height on screen */
var headerHeight = $('#myheader').height();/* get the header visible height on screen */
var bodyHeight = $('#mybody').height();/* get the body visible height on screen */
var footerHeight = $('#myfooter').height();/* get the footer visible height on screen */
var newBodyHeight = windowHeight - headerHeight - footerHeight;
if(newBodyHeight > 0 && newBodyHeight > bodyHeight) {
$('#mybody').height(newBodyHeight);
}
});
</script>
Note: I'm not using absolute positioning in this solution, as it might look ugly in mobile browsers
This question is a duplicate of Make a div fill the height of the remaining screen space and the correct answer is to use the flexbox model.
All major browsers and IE11+ support Flexbox. For IE 10 or older, or Android 4.3 and older, you can use the FlexieJS shim.
Note how simple the markup and the CSS are. No table hacks or anything.
html, body {
height: 100%;
margin: 0; padding: 0; /* to avoid scrollbars */
}
#wrapper {
display: flex; /* use the flex model */
min-height: 100%;
flex-direction: column; /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}
#header {
background: yellow;
height: 100px; /* can be variable as well */
}
#body {
flex: 1;
border: 1px solid orange;
}
#footer{
background: lime;
}
<div id="wrapper">
<div id="header">Title</div>
<div id="body">Body</div>
<div id="footer">
Footer<br/>
of<br/>
variable<br/>
height<br/>
</div>
</div>
In the CSS above, the flex property shorthands the flex-grow, flex-shrink, and flex-basis properties to establish the flexibility of the flex items. Mozilla has a good introduction to the flexible boxes model.

Categories