I'm trying to get my bootstrap carousel acting as the background in a fixed position. In my actual code I've got it to a full width and height that fills the screen, but it only stays in one place. I added 'position: fixed' to a class on my section containing the carousel so it'd float at the front and I was going to z-index it to behind the rest of my content, but it just completely disappears?
I've replicated the problem in this simplified example:
http://jsfiddle.net/v9FMw/4/
HTML
<div class="fill bg-green">
<div>content section (scroll down)</div>
</div>
<div class="fill bg-white">
<div>content section (further x)</div>
</div>
<div class="fill bg-green fixed-section"> <!-- fixed section declared here -->
<-- carousel code -->
</div>
<div class="fill bg-white">
<div>content section</div>
</div>
CSS:
.fill {
width: 100%;
height: 100%;
position: relative;
}
.fixed-section {
position: fixed; /* controls fixed carousel positioning here */
}
You have to give the container top: 0.
.fixed-section {
position: fixed;
top: 0;
}
Updated Fiddle
Related
I have a React app where I have a header, container and footer. For animation purpose of route loading, I have to use position: absolute on the page rendering part of the container.
The container has a row and 2 columns. One for menu and other is the place where pages are rendered.
Now the problem is since Container second column is position: absolute footer goes below to the highest column.
Is there any way to make both columns inside row to have the same height? I am using Bootstrap 4.Any other suggestion is appreciated.
<header>..</header>
<div class="row">
<div class="col-4">
</div>
<div class="col-8"> //This is positioned absolute
<div class="page"><div> // class that applies position
</div>
</div>
<footer>..<footer> //footer goes below any column whichever has more height.
Edit:
CSS:
.page {
position: absolute;
left: 0;
right: 0;
}
All other classes are Bootstrap.
You can see the issue if you can log in to the below app with any email and any password.
https://healthrecordstack.now.sh/
As in the picture below, the footer overlaps the content. Footer sits just below the menu column as the content column is given a position absolute.
.row
{
display:flex;
min-height:80vh;
}
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You should use table as below example:
.table-row{display: table; table-layout: fixed; }
.table-col{display: table-cell; float: none; vertical-align: top; }
<header>..</header>
<div class="row">
<div class="table-row">
<div class="col-4 table-col"> </div>
<div class="col-8 table-col"> //This is positioned absolute ......
</div>
</div>
</div>
<footer>..<footer>
I'm using Bootstrap 3 with a 2 column layout. The right column is my sidebar. I have different backgrounds for each and I can tell that my sidebar column does not continue all the way down to the bottom of the main content wrapper. In most cases, the main content, which is on the right, is longer than the sidebar content, but I don't want to see the background of the main content area, but the sidebar content background continued.
Here's the jsfiddle that I modeled after in order to achieve a 100% height sidebar, but I can't seem to get it to work.
http://jsfiddle.net/34Fc5/1/
Here's the gist of my code:
<div id="content" class="clearfix row">
<div id="main" class="col-sm-8 clearfix" role="main">
<article id="post-1728" class="post-1728 page type-page status-publish hentry clearfix" role="article" itemscope="" itemtype="http://schema.org/BlogPosting">
<header>
<div class="page-header"><h1 class="entry-title" itemprop="headline">About</h1></div>
</header> <!-- end article header -->
<section class="post_content clearfix" itemprop="articleBody">
<p class="lead">LENGTHY CONTENT</p>
</section> <!-- end article section -->
<footer>
</footer> <!-- end article footer -->
</article> <!-- end article -->
</div> <!-- end #main -->
<div id="sidebar1" class="col-sm-4" role="complementary">
<div class="sidebar-content"></div>
</div>
<div style="clear:both">
</div>
Here's my jsfiddle:
http://jsfiddle.net/8yvgh7xj/
It would be great if someone has had this issue before. I see plenty of LEFT sidebar 100%, but no right sidebars with Bootstrap.
Thanks.
Sidebar on the left
On option would be removing the sidebar from normal flow by absolute positioning, and expanding its height (the margin box) by top: 0, bottom: 0 declarations with the respect to the wrapper, .wrap.
.sidebar {
position: absolute;
top: 0; bottom: 0; left: 0;
}
.wrap {
position: relative;
min-height: 100%;
}
Then we need to push the right column containing the <article> to the right by col-xs-offset-4 offset class - based on the size of the sidebar - as follows:
EXAMPLE HERE
<div class="col-xs-8 col-xs-offset-4"> ... </div>
Sidebar on the right
Considering the same approach, the only thing should be changed is to alter left: 0 to right: 0.
Also there's no need to have offset class on the other column; Therefore you could remove col-xs-offset-4 as well.
UPDATED EXAMPLE
<div class="col-xs-8"> ... </div>
I feel your pain. I have run into this problem and there don't seem to be many elegant fixes for this issue. A few approaches that can be taken include:
Use padding and negative margin to increase the height (see article below)
http://www.positioniseverything.net/articles/onetruelayout/equalheight
I have have used this in previous projects and it works very nicely - there are some issues that are addressed in the article - but I have found this technique to be reliable.
Use Javascript to increase the height of the div at runtime
you may see a flicker whilst the heights of the divs are calculated and adjusted.
Use tables
doesn't fit in well with the bootstrap paradigm of laying out page - may have issues with responsive design
The following question CSS - Expand float child DIV height to parent's height addresses the problem in some detail.
your css becomes:
#content {
overflow: hidden;
}
#sidebar1{
background-color:#eee;
background-repeat: repeat;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
#sidebar1 .sidebar-content{
width:100%;
padding: 5px;
margin:0;
position:relative;
}
I am building an app that uses Bootstrap. I want this app to have a footer. The footer needs to "stick" to the bottom. In other words, if the content is larger than the height of the screen, the footer should still be visible, the content goes under it. If the content takes less than the height of the screen, I still need the footer to stick tothe bottom. I tried using the sticky footer. However, that doesn't work. Currently, I am trying the following:
Here's My Plunker
My HTML looks like this:
<div class="footer">
<div class="container text-center">
<button class="btn btn-warning"><span class="glyphicon glyphicon-filter"></span></button>
<button class="btn btn-warning"><span class="glyphicon glyphicon-th"></span></button>
</div>
</div>
How do I build a footer that permanently sticks to the bottom? I'm basically trying to build an "action bar" that is visible only when the site runs on a phone.
Thank you for your help.
use the following code
.footer {
background-color: #f5f5f5;
bottom: 0;
height: 60px;
position: fixed;
width: 100%;
}
you should change the footer position :
.footer {
background-color: #f5f5f5;
bottom: 0;
height: 60px;
position: fixed; /*change it*/
width: 100%;
}
Bootstrap comes with its nav elements ready to roll as a footer.
Simply create your element and add these classed navbar navbar-default navbar-fixed-bottom.
<footer>
<div class="navbar navbar-default navbar-fixed-bottom" id="footer">
<div class="container">
<p>this is your footer that sticks to the bottom</p>
</div>
</div>
</footer>
You can then expand on this by splitting the containing div into blocks with something like
<div class="row">
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
the above would go inside the container div
as shown here http://jsfiddle.net/showcaseimagery/5y14pqgv/
Below I have some HTML code. Everything is positioned relative apart from contentRow which is positioned absolutely. This is making the footer stick to where the browser window ends and not where the scroll bar ends.
Is there any way I can make the footer go down to the very bottom where the scroll bar ends.
<div id="s4-workspace" style="width: 1920px; height: 748px; overflow:scroll">
<div id="s4-bodyContainer" style="position:relative">
<div class="headerSection" style="position:relative">
<div class="globalHeader">
</div>
</div>
<div>
<div id="contentRow" style="position:relative">
<div class="fixedWidthMain" style="position:relative">
<div class="fixedWidthMain" style="position:absolute">
</div>
</div>
</div>
</div>
</div>
<!--PAGE FOOTER SECTION-->
<div class="pageFooterSection" style="clear: both;position:relative">
</div>
</div>
Theres a few available flavours of the solution for this but they basically go something like this.
EXAMPLE
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
a point to remember is that height of elements in html are always passed through the parent. so if you dont define height 100% on a parent the child won't know either. Good luck and let me know if you have any other issues :)
SOURCE
http://mystrd.at/modern-clean-css-sticky-footer/
If I'm understanding correctly, you could make s4-bodyContainer position:relative so that the contentRow is only positioned absolutely within that container. Then footer would go below the bodyContainer.
I am trying to arrange a group of divs on-top of each other. The top div must be static place in the top-left (width = 100%) and not affected by the vertical scrolling that the centre div will have. I works somewhat as I want, except that the container div also got a vertical scroll that I don't want. Now I have two overlapping vertical scrollbars, one for the container div and one for the centre. I also use JQuery mobile on the page if that could help me arrange the divs.
How can I make my centre div (id=scroll) the only div that is scrollable and have my top div (id=fixed) at a fixed position without a scrollbar (no overlap of vertical scrollbars) and not be affected by page scrolling?
<div id="conatainer" style="overflow: hidden; height: 100%">
<div id="fixed" style="position: static; top: 0%; overflow: hidden; height: 50%">
<div id="map_canvas" style="width:100%; height: 85% ;min-height: 180px">
...
</div>
<div id="scroll" style="position: absolute; overflow: auto; overflow-x: hidden; height: 50%">
...
</div>
</div>
This is a standard jQuery Mobile template with a fixed header and content that scrolls: http://jsfiddle.net/Gajotres/yWTG2/
<div data-role="page" id="index">
<div data-theme="a" data-role="header" data-position="fixed">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
And here's a working example: http://jsfiddle.net/Gajotres/Rf7NA/
For a header to be fixed it needs data-position="fixed" attribute.
Also in case you WANT to use only a layout and not jQuery Mobile styling take a look at this ARTICLE or find it HERE: Search for the chapter: Methods of markup enhancement prevention.