Ok, I am a bit stuck on this one and can't seem to figure out!
So I am looking for a similar solution, that Apple uses, when they present the specifications of a product.
What I want to achieve is that you have two divs, each of them is taking full space of the browser!
So you would have
<--div1-->
Which is full browser width and height, no problem here by setting the 100%
<--div-->
and then the second div under-neat
<--div2-->
The user has used it's scroll wheel and is outmatically snapped to this div, which is also full size of the browser! How doable is this?
<--div-->
Hope this makes sense :)
I been asked to provide some code:
So I guess the HTML is:
<div id="contentOne">
Just some content
</div>
<div id="contentTWO">
Just some other content
</div>
and then the CSS
html {
min-height:100%
}
body {
height:100%
#ContentOne {
min-height:100%;
}
#ContentTwo {
min-height:100%; !--well this doesn't work--!
}
Hope this makes sense now!
Related
I have the following problem: in my web page when I reduce the size of the window, a horizontal scrollbar appears below as if I would had content that exceed the size of the window. But when I took a look at it I can't identify the problem: isn't the navbar (that is "fixed") and neither one of the elements of the sponsors that is floated. I have deleted both of them and the problem persists.
I'm pasting a link to the webpage and I would be very grateful if anyone could help me. If anyone need some of the HTML or CSS code please ask me and I will provide it.
http://alvaroalonso.net/
Update the width 1300px to 100%.
.nosotros .wrapper {
width: 100%;
}
The answer is the fixed width of this div:
.nosotros .wrapper {
width: 1300px;
}
Which instead should be set to 100%.
Ok, i will try my best to explain what i am trying to achieve since i am not allowed to add images here on stack, so here it is:
I have a design for tablets. The whole content takes up the 100% height of the design with just 15px of padding on top and bottom.
So, i have to make the design fit to all the apps available in the market, without having vertical scroll.
I have tried many solutions like using bootstrap with
HTML
<html>
<body>
<div class="main-content">
</div>
</body>
</html>
CSS
html, body, main-content {
height:100%;
overflow:hidden;
}
also, i have tried reducing the size of elements in the page using media queries just to fit the screen vertically for different tablets.
The problem is, there are like 80 pages in the design and i believe this is not the best solution for this amount of pages and to add media queries for every single page. ( the page designs are different from each other, so common classes cannot be used )
Would like to know is there any other solution to fit the height of the page for tablets with no scroll.
Any help, suggestion will be appreciated.
Try this,
html, body, main-content {
height:100vh;
overflow:hidden;
}
I have a simple site with 2 sections that have a small amount of content and a background image. Before I added the id skrollr-body tag everything seemed to work fine, but now since that ID is now containing all of my content, the 100% heights are no longer working. I tried to use the 100vh property, but that didn't seem to work either. This only seems to be an issue on the iPad, and I know that is because of the way Skrollr handles scrolling on ios devices. I'm at a loss on how I can force the sections of content to be 100% of the viewport and still have Skrollr work on mobile.
Here is a simple demo of what I'm talking about
Thanks Prinzhorn for your help if you happen to read this!
link
You already found the cause, solving it is skrollr unrelated and just CSS.
#skrollr-body {
height:300%;
}
section {
height:33.3333%;
}
Edit: This approach is more general and should work the same as without skrollr-body
#skrollr-body {
height:100%;
overflow:visible;
}
I am working on the second version of my new web app Trekeffect and I want my interface content to be 100% of the pages height, but I just can't seem to figure it out. I make the HTML, body and all other parent elements 100% height, but no matter what I do the height never fills the document.
This screenshot shows my issue:
You can view the issue by visiting: http://dev.trekeffect.com/home
and then by clicking on any of the cities listed: Example: Anchorage, Alaska
I've played around in Firebug and no matter what I do I can't get this working. Please help!
It is because of this:
html, body {
height: 100%;
}
.three_col .right {
height: 100%;
}
Remove those, and your problem is solved!
The reason this is causing a problem, is because CSS sets the body to a height of 100% of the available screen space.. Therefore any content below this is considered overflow.
I have an issue that I have seen come up in a couple different sites and I have never been able to find a solution. I have noticed that many other people have had similar issues but every fix that I have seen is not working on the site I am currently working on. Basically what I am trying to do is have a responsive layout with a header that has a repeating background that spans the entire window and a body that has a fixed width. The basic html looks like this:
<html>
<body>
<div id="header">Header content</div>
<div id="main-content">Main content here</div>
</body>
</html>
and the css is something like this:
html, body{
width:100%;
}
#header{
width:100%;
}
#main-content{
width:1000px;
}
This code is not meant to be representative of what is actually on the site that I am working on but to give you an idea of what we are trying to do. To see the actual html, css, etc. please go to http://236887.site-show.com/ and take a look at it. The site initially will look fine but if you shrink the size of the window down so that there is a horizontal scroll bar and then scroll to the right and look at the header, you will see that the repeating background is not going to the full width.
One thing that I did find is that removing the width:1000px on the main-content did fix this issue. However, we need that main-content area to be set to that width. I have also tried setting overflows to hidden and setting floats on the header but nothing seems to correct the issue.
This is especially an issue with Android/iOS systems which run on tablets, smartphones, etc. Any help that you can give me on this issue would be much appreciated.
The issue is that your main-content div is set at 1000px (with 30px horizontal padding) while your CSS file specifies your header to be 960px. Increasing the width of your header to match your content will correct the problem.
Here's the code for the fix:
.grid-50-50 {
display: table;
width: 1030px;
}
If you are doing it in HTML5 I recommend using 100% <header> tag then adding a 100% div 'wrapper'....with this you can have more flexibility.
But for this...If you dont' want to edit the header then set your min to 1030px in your body tag:
body {min-width: 1030px;}
:)