I have a page with a section of tabs in which each one of these tabs has more or less content and when I open a tab with a lot of content and then I go to a tab with less content the page keeps allowing scroll (even it the page is empty), I've just found answers about when the content grows up but nothing about when it shrinks out.
What I want to achieve is to be able to scroll when there is a lot of content on the screen and use just the view height when there is little content on the screen.
This is the basic scheme of the page
HTML:
<body>
<div class="wrapper>
<div class="content">
</div>
<footer>
</footer>
</body>
css:
body {
margin: 0;
padding: 0;
height:100%
}
.wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
.footer{
position:relative;
bottom:0;
}
This is how it looks when I open a lot of content and then a little:
add max-width: 100vw; to your overflowing element replace 100vw with ur value
Related
I am currently working on a website where sometimes (for instance when the loading square comes up - like image below) the main content div is too small to fill the entire page with the footer/header.
I would like the main content that is in between the header and footer to stretch when the content div is too small, so that it fills the entire screen, while keeping the footer and header in view.
I have tried many different ways to do this, but all to no avail so far. The image below illustrates my problem.
The HTML layout looks like this:
<body>
<div class="nav-container"></div>
<div class="main-container"></div>
<footer></footer>
</body>
If you are familiar with flexbox, this would do the trick:
<body>
<header></header>
<div class="main-container"> Main content </div>
<footer></footer>
</body>
html, body {
margin: 0;
height: 100%;
min-height: 100%;
}
body {
display: flex;
flex-direction: column;
}
header, footer {
flex: none;
}
.main-container {
flex: auto;
}
I am hoping one of you can help. I have a problem that with googling and checking the forums I have not been able to solve.
I would like to create a landing page that has a tall bg image that extends to 100% width and adjusts to the browser window + the dynamic height of the content. All the content should be below the boundary of the browser window so its just the image that can be seen when the browser first loads up and you scroll down to the content which sits over the bottom part of the extended image.
My HTML currently is:
<body>
<section id="sectionOne">
<div id="sectionOneLanding"></div>
<div id="sectionOneContent">CONTENT TO SIT HERE</div>
</section>
</body>
And my CSS is currently:
html,
body {
height:100%;
width:100%;
}
#sectionOne {
height:100%;
background-image: url(../images/cliff.jpg);
background-size: cover;
}
#sectionOneLanding {
height:100%;
width:100%;
}
At the moment, the image crops to 100% browser height and when you scroll down the additional content sits over a white bg instead of the remainder of the image. I believe this is due to the #sectionOne height being 100% but when I set it to higher than 100% it pushes my content further down but still on a white bg. Changing Background-Size to 100% also didn't work. It reacted the same as using cover.
Any ideas? Is there a handy CSS trick?
Apologies if this doesn't make clear sense. Ask any questions you need to as its hard to describe.
You need to use positioning for this case.
html, body {
height: 100%;
margin: 0;
}
#sectionOne {
position: relative;
height: 100%;
background-image: url(../images/cliff.jpg);
background-size: cover;
background-color: #99f;
}
#sectionOneLanding {
height:100%;
width:100%;
}
<section id="sectionOne">
<div id="sectionOneLanding"></div>
<div id="sectionOneContent">CONTENT TO SIT HERE</div>
</section>
You don't need width: 100%. But you need margin: 0; as there are default margins. I have added a background colour so that you can clearly see the background spanning fully leaving the content in the next page.
If you need both the image and the content to be in the same page, the you need to use Flex Box.
FlexBox Example
body, html {
height: 100%;
margin: 0;
}
#sectionOne {
display: flex;
flex-direction: column;
height: 100%;
}
#sectionOneLanding {
background-color: #99f;
flex: 1;
}
<section id="sectionOne">
<div id="sectionOneLanding"></div>
<div id="sectionOneContent">CONTENT TO SIT HERE</div>
</section>
Preview
I have a CSS layout problem. Here's a fiddle
I want a header and footer on the page, with the "content" taking up the rest of the available space. I was doing it with a JQUery plugin that calculated and set the height of the relevant element, but it wasn't playing nicley with some knockout things i had going on on the page so I decided screw that and use CSS.
Setting the sections to be table rows seemed to solve the problem of vertical expansion and the whole thing now nicley fills the page, but i have a table which is causing some issues.
When it has data in it it expands the width of the columns (i don't want the text to wrap). And that means the width of my wrappers also expand (thanks tables) I can't seem to hang a scrollbar on anywhere to prevent it happening.
My question is two fold:
Is there a better way of achieving the header/footer thing?
Can i get my scroll bar back?
The ideal solution would be in CSS rather than using JavaScript. I must support all browsers, including IE down to IE 8, and preferably IE 7.
The HTML:
<body>
<div class="page-wrapper">
<div class="section-wrapper">
<P>I want this at the top</P>
</div>
<div class="content-section section-wrapper">
<P>This is in the middle - taking up all the remaining space.</P>
<P>Making the wrapper a table-row solves the problem nicely...</P>
<div class="table-wrapper">
<table>
<thead>...</thead>
<tbody>
<tr>
But: In this table I have some data which causes the table to overflow the edge of the screen.
</tr>
<tr>
How do I make it have a scroll bar instead?
</tr>
</tbody>
</table>
<p>Ideally the scroll bar would go at the bottom of this section.</p>
</div>
</div>
<div class="section-wrapper">
<P>This goes at the bottom</P>
</div>
</div>
</body>
The CSS:
body, html{
width: 100%;
height: 100%;
}
.page-wrapper{
display: table;
height: 100%;
}
.section-wrapper{
display: table-row;
width: 100%;
background-color: lightGrey;
}
.content-section.section-wrapper{
height: 100%;
background-color: white;
}
table{
white-space: nowrap;
border-spacing: 20px 0;
border-collapse: separate;
}
.table-wrapper{
overflow: auto;
display: inline-block;
}
You could set a max width of the wrapper to the screen with, and make it a block display, then it should show a scroll bar if the table is wider than the available screen. Not sure if that was your question.
.table-wrapper{
max-width: 100vw;
overflow: auto;
display: block;
}
Also, to have the footer at the bottom, you could use flexbox on the page-wrapper.
.page-wrapper {
height: 100vh;
display: flex;
flex-flow: column nowrap;
}
.section-wrapper {
flex-grow: 1;
}
Updated fiddle: https://jsfiddle.net/211sgmjv/
I want to fix my footer at the bottom gap. I think content is less then this problem repeated and content full problem solved but I want to content less does not shows gap I'm using same footer remaining pages so help me any one.
If content is less, why not simply fix it at the bottom. I mean its the dirtiest hack possible.
If you want something clean, look into sticky footer.
$(function(){
function adjust(){
var winH = $(window).height(),
docH = $('document').height();
if(docH > winH){
//leave it
}else{
$('.footer').addClass('fix-footer');
}
}
$(window).on('resize',adjust);
})
.fix-footer{position:fixed; bottom:0; left:0; width:100%;}
The simplest way to do this is by using Flexbox. The flex property specifies how much the item will grow to fill up the remaining space.
The container needs to be set to display: flex, and we set min-height: 100vh for the body so that it fills up at least 100% of the viewport height.
CSS
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1;
}
HTML
<body>
<main>Main content goes here</main>
<footer>Footer goes here</footer>
</body>
Use .main class as a container put all your body data in main container
<html>
<head>
<style>
body {
margin:0;
display: flex;
height: 100vh;
flex-direction: column;
display:-ms-flexbox;
}
.main {
flex: 1;
}
</style>
</head>
<body>
<div class="main">Put you form here</div>
<div class="footer">Footer goes here</div>
</body>
</html>
<div class="footer"></div>
css
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
}
Position-absolute:
This is a very powerful type of positioning that allows you to literally place any page element exactly where you want it. You use the positioning attributes top, left bottom and right to set the location.
Position-fixed:
A fixed position element is positioned relative to the viewport, or the browser window itself. The viewport doesn't change when the window is scrolled, so a fixed positioned element will stay right where it is when the page is scrolled,
Here's an example that goes halfway there:
http://jsfiddle.net/gt9vz4qk/1/
CSS: #content {background-color: #fdd; overflow: auto; height: 70vh;}
HTML:
<button>Hello</button>
<div id="content">
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>
</div>
<input>
Using relative size units like vh helps, but I feel like I'm missing something really basic. As you can see, if you resize the window or even the splitter on the jsfiddle website far down, the other elements start compressing and a second scrollbar pops up. The only scrollbar should be the overflow one.
Another way to think about this is that I want the top elements to take up as much space as they need, the bottom elements to take as much space as they need, and anything else should be taken up by the central element.
Here's a flexbox solution:
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
#content {
background-color: #fdd;
overflow: auto;
flex: 1;
}
<div>
<button>Hello</button>
</div>
<div id="content">
A<br>
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>
</div>
<div>
<input>
</div>
Fiddle