I would like to create a scrollable div. I know here is lots of example, but neither of them works for me.
I have a .page class, which fills my mobile's screen. Inside of it I have a .content div. This is contain the content of the pages. It is just align the content from the top, and it should have to scroll the content if it is going out of the .content's boundaries.
.page{
margin: 0;
padding: 0;
min-height: 100%;
width: 100%;
display: block;
}
.content{
padding: 4em 0 0 0;
overflow-x: hidden;
overlofw-y: auto;
/*-webkit-overflow-scrolling: touch;*/
}
What should I do to get it working?
Update
I tried it in fiddle, and it is worked. But not on my phone. Because of it I don't know where should be the problem.
Because of it I attached my whole code to the question. This is very important for me to get it working.
Please help me. Thanks for any help. :)
Is this what you need??
html, body{
height:100%;
margin:0;
padding:0;
}
.page{
margin: 0;
padding: 0;
height: 100%;
width: 50%;
display: block; border:solid #000 1px
}
.content{
padding:0;
overflow: scroll; overflow-x:hidden;
height:100%
/*-webkit-overflow-scrolling: touch;*/
}
span{
padding:4em 0 0 0;
display:inline-block
}
DEMO
Use span tag to specify the padding for content div coz if you give padding to the content div it calculates as additional height 100%+4em so..
And make sure that you are specifying html and body height as 100% whenever you want to use height:100% in your page.
You need to get window height for that and need to set it for .page. Anyway, you may need to add some javascript for that. I used jQuery for solution. [you can use other library, its up to you. I am suggesting you this solution]
Here is markup:
<div class="page">
<div class="content">
</div>
</div>
CSS:
* { margin:0; padding:0 } /* using * for demo _ you should use proper reset */
html, body { height:100%; height:100% }
body { height:5000px; background-color:#F7F7F7; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:1.6em }
.page { background:#A2A2A2; width:200px; height:600px; overflow-y:scroll; position:fixed }
.content { background-color:#4D4D4D; padding:10px; color:#B7B7B7; }
JS:
$('document').ready(function(){
var wHeight = $(window).height();
$('.page').css({
'height' : wHeight + 'px'
});
});
Just see this fiddle link - (live demo) - http://jsfiddle.net/LZT7B/
Related
I am trying two things :
Show content on a modal as how it would appear on an A4 page
windows.print() the modal on an A4 page through major browsers
Following is my CSS:
.page {
width: 210mm;
min-height: 297mm;
padding: 20mm;
margin: 10mm auto;
border: 1px #D3D3D3 solid;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.subpage {
padding: 1cm;
border: 5px black solid;
height: 257mm;
outline: 2cm #FFEAEA solid;
}
#page {
size: A4;
margin: 0;
}
#media print {
html, body {
margin:0 !important;
padding:0 !important;
height:100% !important;
visibility: hidden;
}
.page .subpage .col-md-12,.col-lg-12{
float:left;
width:100%;
}
.page .subpage {
padding: 1cm;
border: 5px black solid;
height: 257mm;
outline: 2cm #FFEAEA solid;
position:absolute;
}
.page {
visibility: visible;
}
}
Here's how the modal looks:
But this is how it looks on calling window.print() on button click:
What am I doing wrong here? Relative CSS newbie, have looked at a bunch of SO questions and other resources, but can't seem to figure this out.
UPDATE: I used z-index:9999 and width:140% to get the modal content(i.e. class="page") to cover the A4 page width. Don't think its the best solution, also can't get height to stretch the entire 297mm; height still as much as shown in second image. The 140% looks fine on a pdf saved through Chrome, is cutoff (understandably) in firefox and shows up as blank pdf in IE. Updated CSS:
#media print .page {z-index: 9999;padding: 20mm;margin: 10mm auto;width: 140%;height:100%;position: fixed;top: 15mm;bottom:0;left: 20mm;visibility:visible;}
Please try this
#media print{
body * {
visibility: hidden;
}
#page, #page * {
visibility: visible;
}
#page {
position: absolute;
top: 0;
left: 0;
}
}
I'd write a comment but I can't, so answer box it is. tl;dr, you need to provide more code or reproduce this issue in a place where we can see it.
I put your code into plain page with just a div with class page and nested a div with class subpage and there are some padding issues and the print view looks nothing like the web view.
Your min-height: 297mm; wasn't necessary and was adding extra space as it doesn't align with your height setting for .subpage.
Your position:absolute; squished your .subpage in print view.
But with those two tweaks, your css, with just simple divs in html, works about fine. I suspect something else on your page has conflicting dimensions, but again, without a reproduction on fiddle or something, we can't see it.
PS: I saw this other post from some time ago and there's a DEMO in there. It looks promising: CSS to set A4 paper size
I have updated an jsfiddle example to fit your needs
Here is css code
#media screen {
#printSection {
display: none;
}
}
#media print {
body * {
visibility:hidden;
}
#printSection, #printSection * {
visibility:visible;
}
#printSection {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background: yellow;
}
}
Here is html:
<div>
<button id="btnPrint">Print (this button should also be NOT be printed)!</button>
</div>
<hr />
<div id="printSection">
<div id="printThis">
This should BE printed!
</div>
<div id="printThisToo">
This should BE printed, too!
</div>
</div>
and a javascript code to call print:
document.getElementById("btnPrint").onclick = function() {
window.print();
}
http://jsfiddle.net/95ezN/1459/
I have a a div on my page, and I also have a button, that when pressed, adds a new <p> element in that <div>. If I keep pressing the button the height of the div will exceed the height of the actual page, and I'd have to scroll the page in order to see the last paragraph, and then scroll back up in order to press the button again. I want the div to become vertically scrollable after it reaches the height of the page. This is the CSS that I used for the div:
div#messages{
width: 50%;
margin-left: auto;
margin-right: auto;
padding:20px;
border: 1px solid black;
border-radius: 3px;
overflow-y: auto;
}
But the overflow-y:auto; property doesn't seem to work?
What am I doing wrong and how can I achieve the desired effect?
Thanks.
JSFIDDLE : https://jsfiddle.net/pm5wkgv4/
You need
html,body{
height:100%;
margin:0;
padding:0;
}
* { /*Or at least html, body and #messages*/
box-sizing: border-box;
}
#messages{
width: 50%;
max-height: 100%;
padding:20px;
border: 1px solid black;
border-radius: 3px;
overflow-y: auto;
position:absolute;
top:0;
left:25%;
background:#fff;
}
jsfiddle: https://jsfiddle.net/vimxts/pm5wkgv4/2/
Also, you should only have one id in a page, you may delete the div part before #message
Would this be a solution to your problem: Plunkr
you can use
height:60vh;
to specify the heigt.
Using Daniel Cheung answer, if you want the page to be unscrollable, you might want to add : overflow: hidden.
https://jsfiddle.net/pm5wkgv4/1/
#message {
max-height:100%;
box-sizing: border-box;
}
html, body {
height:100%;
box-sizing: border-box;
overflow: hidden;
}
I got a div container that has a max height of 400 pixels. I'm placing a pretty large image inside the container. Since the container has a max height it's obviously cutting off most of the picture, which is what I'm aiming for. But my only issue is trying to get the image to center inside the div, so the main part of the picture is shown.
Here is the code I have currently:
<div class="headerimg">
<img src="www.jpg.com"/>
</div>
.headerimg { max-height: 400px; overflow: hidden; }
.header img { width: 100%; height: auto; }
Try using:
div.container {
margin: 0 auto;
width: 900px;
}
div.container img {
max-height:400px;
}
Simple use : text-align:center
live example is here >>>>
div{
max-height:400px;
border:1px solid red;
text-align:center;
}
div img{
height:500px;
width:200px;
}
I have a web page that is wide (3078px) and pretty long too (1540px).
The page has a large div containing 6 divs inside it on 3 columns and two rows (each row a separate div itself).
When the page loads, it displays the top left div (box1) in the top right corner, with the option to scroll down or right to see the rest of the content.
I'd like to make it be centered on load, that is to say, I would like the middle column (box 2) to show in the middle of the page when loading, with the option to scroll left and right for the rest of the content.
Is there any script or CSS/HTML combo that would allow me to select what will be displayed in the browser on load? Essentially, what I'm trying to do is similar to centring the whole of the body within the browser window. I was considering attaching an anchor with a name to the middle div (box2), but I still wouldn't know the Javascript to make it select that div as the top left to load on.
Please let me know if this is a bit confusing, I can make a sketch to explain what I mean if that could help! (The jsfiddle link is below)
HERE IS THE CSS:
body {
margin:0px;
padding:0px;
text-align: center;
background:black;
}
#box1, #box2, #box3, #box4, #box5, #box6 {
margin:0px;
padding:0px;
float:left;
display:inline-block;
width:1024px;
height:768px;
background:transparent;
border:1px red solid;
}
#above {
margin:0px;
padding:0px;
float:left;
display:inline-block;
width:3078px;
height:770px;
background:transparent;
}
#below {
margin:0px;
padding:0px;
float:left;
display:inline-block;
width:3078px;
height:770px;
background:transparent;
}
#mainbox {
margin: 0 auto;
padding:0px;
float:left;
display:inline-block;
width:3078px;
height:1540px;
background:transparent;
}
AND THE HTML:
<div id="mainbox">
<div id="above">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</div>
<div id="below">
<div id="box4"></div>
<div id="box5"></div>
<div id="box6"></div>
</div>
</div>
There is a JS fiddle too: http://jsfiddle.net/KyMet/
A similar question would be (to remove the pain of horizontal scrolling) – If I have a really long page, which scrolls vertically, how can I get it so that it loads with the bottom of the page in the browser window, so that, practically, you need to scroll up to see the rest of the content?
You need to use some query to pull this of.
EDIT
DEMO
$(function(){
//total width of your wrapper
var totalWidth = $('#mainbox').outerWidth(true);
//width of the user browser
var width = window.innerWidth;
//calculate the middle
var middle = (totalWidth - width) / 2
window.scrollTo( middle, 0 );
});
YOUR CSS
I would also recommend you to clean up your css, there is a lot of unnecessary properties there. You can choose to use this
body {
margin: 0 auto;
padding: 0;
text-align: center;
background: #222;
overflow: scroll;
}
#box1, #box2, #box3, #box4, #box5, #box6 {
margin: 0;
padding: 0;
float: left;
display: block;
width: 1024px;
height: 768px;
border: 1px red solid;
}
#box2 {
background-color: aqua; /* only for demo */
}
#above {
margin: 0px;
padding: 0px;
display: block;
}
#below {
margin: 0px;
padding: 0px;
display: block;
}
#mainbox {
padding: 0;
width: 3078px;
height: 770px;
}
/* For modern browsers */
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
*zoom:1;
}
You would have to use jQuery scrollto library
http://demos.flesler.com/jquery/scrollTo/
I'm looking to recreate the effect here on images 2 and 3: http://www.jessicahische.is/illustrating/penguinsinbathingsuits
These images obviously have "padding" filled in already by the image itself, but I was wondering if this effect is possible with just jQuery and CSS?
Any help or insight would be great, thanks!
A simple method for centering items. Try something like this:
.box {
display: block;
height: 500px;
width: 500px;
background-color: #eee;
margin:0;
padding:0;
vertical-align:center;
}
.center_item {
display: block;
height: 100px;
width: 100px;
background-color: #aaa;
margin:0 auto;
padding:0;
}
And the corresponding HTML.
<div class="box">
<div class="center_item">Put your image here.</div>
</div>
What this does is simply puts a container around whatever you need to be centered. By using margin:0 auto; you can center any item within it's parent. I hope this is what you were looking for.
jsBin demo
In this example, we use text-align:center; for our element #gallery
and force the image to be 100% height.
Than with jQuery we check that image on .load() to see if the image width exceeds the gallery width. In that case we'll change the width and vertical-center-alignment with jQuery. E.g:
CSS:
#gallery{
position:relative;
margin:0 auto;
width:600px;
height:500px;
border:1px solid #aaa;
text-align:center;
}
#gallery img{
height:100%;
}
jQuery:
$('#gallery img').load(function(){
img = $(this);
imgW = img.width();
if(imgW > $('#gallery').width()){
img.css({width:'100%', height:'auto'});
img.css({marginTop: $('#gallery').height()/2 - $(this).height()/2 });
}
});
Play with the images widths/heights to see how they respond.