I have a custom design for a website that consists of an image as the background, and a box that has the content. The website design
So my problem is that I have a page that has a set of accordion buttons that expand the content larger than the container. I want the container to stay the same size and have the content overflow it.
The relevant code is as follows:
CSS
.background {
background-image: url(/recources/images/page-background.png);
background-size: cover;
background-position: center;
background-attachment: fixed;
height: 100vh;
width: 100%;
padding: 98px;
}
.web-content {
display: table;
height: 100%;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
}
.web-content_row {
display: table-row;
height: 100%;
}
.web-content_row .web-content_height {
overflow-y: auto;
max-height: 100%;
height: auto;
}
HTML
<body class="background">
<section class="web-content">
<div class="web-content_row web-content_height">
<header>
<!-- Header content -->
</header>
<section class="web-content_tutorials-menu">
<button class="accordion-button">Title</button>
<div class="panel">
</div>
<button class="accordion-button">Title</button>
<div class="panel">
</div>
<button class="accordion-button">Title</button>
<div class="panel">
</div>
<button class="accordion-button">Title</button>
<div class="panel">
</div>
<button class="accordion-button">Title</button>
<div class="panel">
</div>
</section>
</div>
<footer>
<!-- Footer content -->
</footer>
</section>
</body>
Whenever an accordion button is clicked, the content pushes the footer and the container box off the page, and this has several issues for me. First I don't want the container to expand with the content, I want the content to overflow the container and the container to stay the same size. Second, once the content is larger the view height the scroll-bar doesn't show up.
Now I did try really hard to figure this out on my own before asking this question. And I also have a few theories on what is wrong. I think the page won't scroll is because of the display: table; and display: table-row; properties in the CSS code.
So if any of you guys have an answer that can fix the content expanding both the footer and the container would be awesome.
Sorry if this explanation was too "in depth". This website has a very custom design that has a lot of differences than most normal websites.
Sincerely,
Hexsphere
Here's how I'd do it keeping your HTML structure :
body {
background: tomato; /* Simulates the photo background */
}
.web-content {
background: #fff;
width: 80vw;
height: 70vh;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: auto;
}
footer {
position: fixed;
height: 10vh; /* change accordingly to your wishes */
width: 80vw;
background: aqua; /* oh yeah I like wicked colors */
left: 10vw; /* (100 - 80) / 2 */
bottom: 15vh; /* (100 - 70) / 2 */
}
<body class="background">
<section class="web-content">
<div class="web-content_row web-content_height">
<header>
<!-- Header content -->
</header>
<section class="web-content_tutorials-menu">
<button class="accordion-button">Title</button>
<div class="panel">
</div>
<button class="accordion-button">Title</button>
<div class="panel">
</div>
<button class="accordion-button">Title</button>
<div class="panel">
</div>
<button class="accordion-button">Title</button>
<div class="panel">
</div>
<button class="accordion-button">Title</button>
<div class="panel">
foo<br>bar<br>foo<br>bar<br>
foo<br>bar<br>foo<br>bar<br>
foo<br>bar<br>foo<br>bar<br>
foo<br>bar<br>foo<br>bar<br>
foo<br>bar<br>foo<br>bar<br>
</div>
</section>
</div>
</section>
<footer>
<!-- Footer content -->
Fixed footer heehaa
</footer>
</body>
I hope this helps!
Related
I am trying to have my footer at the bottom of the page - not fixed. The HTML layout is as follows:
<header><!-- content --></header>
<main>
<div class="margin-center">
<div class="individual">
<section class="hours">
</section>
</div>
<div class="stacked">
<section class="blog">
</section>
<section class="pets-seen">
</section>
</div>
</div>
</main>
<footer>
<!-- footer content -->
</footer>
The following is my CSS:
footer {
/* color */
background-color: #334051;
color: #fff;
/* position and size */
position: absolute;
left: 0;
width: 100%;
}
main {
width: 100%;
height 500px;
margin-top: 250px;
position: relative;
}
All aspects of the page are working and display fine except for the footer which displays over the rest of the content.
Well that is what happens, when you use position: absolute. You can read up more here. Simply remove it and the standard (static) should work.
footer {
/* color */
background-color: #334051;
color: #fff;
/* position and size */
width: 100%;
}
main {
width: 100%;
height 500px;
margin-top: 250px;
position: relative;
}
<header><!-- content --></header>
<main>
<div class="margin-center">
<div class="individual">
<section class="hours">
</section>
</div>
<div class="stacked">
<section class="blog">
</section>
<section class="pets-seen">
</section>
</div>
</div>
<img src="https://www.placecage.com/1000/1000">
</main>
<footer>
<!-- footer content -->
This is the footer
</footer>
I am currently working on a script and in some pages there isn't enough content.In this case I want the page to cover 100% of the browser and put the footer at the bottom.I tried many codes and nothing seems to work I ended up by having a code like this:
<div class="container">
<div id=nav>
NAV
</div>
<div id=core>
<div id=content>
<div id=tophea>
TOP Content
</div>
<div id=msgs>
MSG Content
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</div>
and css like this :
#container{
height:100%
}
#nav{
height:55px;
}
#core{
height:100%
}
#content{
height:100%;
background:red;
}
Here is my jsfiddle : https://jsfiddle.net/k8k7o36b/
Any help will be appreciate. I'll be more than thankful if you add small explanation so I can understand what were I doing wrong.
Thanks
#container{
height:100%
}
#nav{
height:55px;
}
#core{
height:100%
}
#content{
height:100%;
background:red;
}
#footer {
background-color: orange;
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
overflow:hidden;
}
<div class="container">
<div id=nav>
NAV
</div>
<div id=core>
<div id=content>
<div id=tophea>
TOP Content
</div>
<div id=msgs>
MSG Content
</div>
</div>
<footer id="footer">
Footer
</footer>
</div>
</div>
This should do it. I changed div to a footer and added some styling to the #footer id so that it has a position: absolute; and bottom: 0;. You can look into what position: absolute does here.
Edit: Obviously, you can adjust the height of the footer however you want, I just set it to 100px and background-color orange so that we can see it better.
You can try with flexbox:
Note you need to use 100% on html and body and also your footer element at the same level of nav and core
html,body {
margin: 0;
height: 100%;
}
.container {
background: orange;
min-height: 100%;
display: flex;
flex-direction: column;
}
#nav {
flex: 0 0 auto;
height: 55px;
}
#core {
flex: 1 0 auto;
background: red;
}
<div class="container">
<div id=nav>
NAV
</div>
<div id=core>
<div id=content>
<div id=tophea>
TOP Content
</div>
<div id=msgs>
MSG Content
</div>
</div>
</div>
<div id="footer">
Footer <br> footer
</div>
</div>
You can use a flex layout and set the main content area to flex-grow: 1 so it will consume all of the available space between your nav and footer, and that will push the footer to the bottom of the page when there isn't enough content.
body,
.container {
min-height: 100vh;
margin: 0;
}
.container,
#core {
display: flex;
flex-direction: column;
}
#core,
#content {
flex-grow: 1;
}
<div class="container">
<div id=nav>
NAV
</div>
<div id=core>
<div id=content>
<div id=tophea>
TOP Content
</div>
<div id=msgs>
MSG Content
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</div>
You can use calculations in css to help with this.
#core {
height: (100vh - 55px)
}
100vh is 100% of the viewport, while he 55px is the height of the footer. Add any other elements to the calculation if you give them a height also e.g.
#header{
height: 45px
}
#core {
height: (100vh - 100px)
}
html,body,#container{
height:100%
}
#nav{
height:55px;
}
#core{
height:100%
}
#content{
height:100%;
background:red;
}
#footer{
position:absolute;bottom:0;
right:0;left:0
}
<div class="container">
<div id=nav>
NAV
</div>
<div id=core>
<div id=content>
<div id=tophea>
TOP Content
</div>
<div id=msgs>
MSG Content
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</div>
</div>
Add these classes
html,body{
height:100%
}
#footer{
position:absolute;bottom:0;
right:0;left:0
}
Here is a generic flexbox solution.
flex-grow: 1; tells main to fill the remaining space. This also has the benefit of not having to set a specific height on your footer.
Flexbox Support
Chrome 21+
Firefox 28+
IE 10+
Edge
Safari 6.1+
*Some might support the 2012 syntax or require a prefix like -webkit-
html {
height: 100%;
}
body {
margin: 0;
display: flex;
flex-direction: column;
min-height: 100%;
}
header {
background-color: indianred;
}
main {
flex-grow: 1;
background-color: skyblue;
}
footer {
background-color: gold;
}
<header>
Header
</header>
<main>
Content
</main>
<footer>
Footer
</footer>
Since centring my blog content my right hand sidebar has fallen down below my content.
How can I bring it back it up so it sits to the right of my page? (Between the right side border and the edge of the page).
Live link:
https://www.moneynest.co.uk/how-to-choose-a-broker/
Code:
<html>
<body class="post-template-default single single-post postid-594 single-format-standard logged-in admin-bar no-customize-support nolayout windows chrome override" itemscope itemtype="http://schema.org/WebPage"><div class="site-container">
<div class="site-inner">
<div class="content">
<div id="container">
<div class="central-container">
<div class="middle-content">
<div class="inner-post-head">
</div>
<div class="data-content">
<!--MAIN CONTENT HERE -->
</div><!-- End .middle-content -->
</div>
</div><!-- End #container -->
</div><!-- End #content -->
<aside class="sidebar sidebar-primary widget-area" role="complementary" aria-label="Primary Sidebar" itemscope itemtype="http://schema.org/WPSideBar" id="genesis-sidebar-primary"><h2 class="genesis-sidebar-title screen-reader-text">Primary Sidebar</h2><section id="text-9" class="widget widget_text"><div class="widget-wrap"> <div class="textwidget">
<!--SIDE BAR CONTENT HERE--></div>
<!--<div id="popular-articles">
<p class="popular-articles-text">Popular articles</p>
</div>-->
</div>
</div>
</div>
<section id="text-10" class="widget widget_text"><div class="widget-wrap"
</div></section>
</div>
</aside>
<!--END OF SIDEBAR--!>
<!--FOOTER STUFF-->
</body>
</html>
Running Wordpress with custom Genesis theme and Bootstrap.
Your style sheet is having below code
.site-inner, .wrap {
max-width: 1200px;
}
As you have centered your contents with margin-left, this 1200px is not enough to hold your sidebar. SO please change that to below one so that it will work for you
.site-inner, .wrap {
max-width: 100%;
}
Method 2:
Make your content part centralized through out and make your sidebar positioned to right side. Style as follows:
.site-inner{
position: relative;
}
.content {
width: 792px;
margin: 0 auto !important;
float: none;
}
.sidebar-primary {
position: absolute;
width: 240px !important;
right: 0px;
top: 0px;
}
position: fixed;
right: 0;
top: 0;
or instead make it thinner (width:80%) and give the content display: inline
As well as removing the left margin from .content, I'd also recommend removing padding from .site-inner and adding margin:0 auto;.
I tested in your page and did this. It is working. Just decrease your margin-left property in relative media queries.
#media only screen and (min-width: 1200px)
(index):27
.content {
margin-left: 10%;
}
I want to make a background image transparent and found a good answer here. But my footer is collapsing to the top of my page underneath my header. I can see the transparent image in the body, but my main article continues below the footer with the html background color applied. What is causing the footer to collapse? The section which is the parent container for the div's has a defined width. Any help would be appreciated.
html {background: #95A3C2;}
body {
background: white;
background-image: url(_images/pg_p_lewis_bckgrnd.jpg);
width: 960px;
margin: 0 auto 0;
font-family: "minion-pro";
}
section {
width: 960px;
display: block;
position: relative;
}
#trns {
height: auto;
opacity: 0.2; filter: alpha(opacity=20);
position: absolute;
}
#trnsb {
height: auto;
}
#heading {
width: 960px;
}
<body>
<header>
<div id="colA">
</div>
</header>
<section>
<div id="trns">
<div id="trnsb">
<div id="heading">
<div id="colD">empty</div>
</div>
<div id="main">
<div class="text">
<p>text</p>
<p>text</p>
</div>
<div class="image">
<p>Image Gallery</p>
<p><span class="caption">Center image vertically on page and hover to enlarge.</span></p>
<p><img class="img-zoom" src="_images/RL_LEWIS_Alex_KCC_1197_Sur_1.jpg" class="img-thumbnail" alt="lewis land grant" width="259" height="387"></p>
</div>
</div>
</div>
</div>
</section>
<footer>
<div id=copyright>copyright 2016 by Barton Lewis</div>
<div id=hosting>hosting by simply hosting</div>
</footer>
</body>
</html>
You have given #trns a position of absolute. Doing this removes the element from the normal flow of the document. So there is nothing 'pushing' the footer down. From your code I couldn't see a reason for giving #trns an abolute position. You should be able to just remove this declaration from your css.
Using Bootstrap for a responsively designed web-app, I am looking to replicate the typical mobile-app layout:
Fixed Navbar + Overflowing Body + Fixed Footer
Check out the Smartphone preview (right-side icon) of: http://www.bootply.com/124373
I have the following CSS, which is close, but the fixed footer cuts-off the body - instead of the body scrolling:
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;
}
body > .container {
padding: 60px 15px 0;
}
.boxes {
margin-bottom: 22px;
}
.middle {
margin-top: 4%;
overflow: auto;
}
And here's the HTML:
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Mobile App Format Replication</a>
</div>
</div>
</div>
<!-- Begin page content -->
<div class="container middle">
<div class="row boxes">
<div class="col-xs-6 col-md-6"><img src="http://placehold.it/125"></div>
<div class="col-xs-6 col-md-6"><img src="http://placehold.it/125"></div>
</div>
...
<div class="row boxes">
<div class="col-xs-6 col-md-6"><img src="http://placehold.it/125"></div>
<div class="col-xs-6 col-md-6"><img src="http://placehold.it/125"></div>
</div>
</div>
<!-- Fixed Footer -->
<div id="footer">
<div class="container">
<p class="text-muted">Fixed Footer Content</p>
</div>
</div>
What about using position: fixed on the footer element, and removing the negative margin on the body (instead, use 60px bottom padding instead):
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}
body > .container {
padding: 60px 15px;
}
See fork here: Bootply
If you are trying to replicate the mobile app layout, you should try Ratchet:
http://goratchet.com/
And here are some of the examples: http://goratchet.com/examples/
You can use "Tab bar" to have a fixed footer on there. Hope this helps
Just add .bar-nav~.content{padding-top: 44px;padding-bottom: 44px;} in your styles.
It's completely done!