I have a page which I set a div where all the content will be placed. I had the div working as I wanted it, but when I went onto my admin page which displays all the records, I noticed I couldn't scroll down to see the rest.
I managed to fix this so I could scroll downwards if the content when further down the page. However, pages which require to scroll down have a scrollbar on the right side of the div instead of the actual page (far right). I'v used overflow-y:hidden to remove the scrollbar, but I'm then unable to scroll down.
I'm curious to see if anyone has any suggestions in order to remove the scrollbar from the div and only have the standard scrollbar show when needed. This is the current code:
Current
HTML
<html class="no-js" lang="en">
<head>
<title>Home</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="css/Base.css"/>
</head>
<body>
<div class="wrapper">
<p> Duplicate text to test </p>
</div>
</body>
</html>
CSS
*
{
margin: 0;
padding: 0;
}
html
{
height: 100%;
}
body
{
background-image:url('../images/background.png');
font-family: Arial;
color: #000000;
font-size: 14px;
height: 100%;
}
.wrapper
{
width: 62.5%;
height: 100%;
overflow:auto;
background: #fffac8;
margin: 0 auto;
box-shadow: 0px 0px 10px 0px #000000;
}
If overflow:auto is removed from the div, I can scroll down like any normal page, but then the div is cut to the standard page.
Overflow removed from div (Want it like this but with the div still stretching when needed)
In the .wrapper CSS rule, try using min-height instead of height.
.wrapper
{
width: 62.5%;
min-height: 100%;
overflow:auto;
background: #fffac8;
margin: 0 auto;
box-shadow: 0px 0px 10px 0px #000000;
}
Remove height: 100%; from wrapper div. It is by defult height: auto; By giving them height: 100% you are forcing .wrapper to follow the height of its parent. And as you know if it become overflown then it'll automatically take scroll. So don't keep that, its not necessary. I hope it works in your case.
Related
I'm working on a project in which I have a left menu and a form positioned as can be seen in the following image:
As you can see there is a margin between these two elements, in this case the margin was applied to the form on the left side. Now, maybe there is a simple solution for this but I've been stuck trying to find it, is there any way in which the margin start to decrease as soon as the form overflows the viewport when resizing?
Relative units like vw or % are not an option because they will assign a porcentage of the screen but never will be 0. Basically I want to start shrinking the margin until the form element hits the Menu as I resize the screen. Something like this:
The only constraint is that the margin should not be greater than 180px. Here's the html that I used for this example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body, html {
box-sizing: border-box;
margin: 0;
padding: 0;
height: 100%;
}
.container {
width: 100%;
display: flex;
flex-direction: row;
background-color: #ccc;
}
.left-menu {
flex-shrink: 0;
width: 450px;
min-height: 100vh;
background-color: purple;
text-align: center;
}
.form {
width: 500px;
height: 500px;
background-color: blue;
margin-left: 180px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="left-menu">
<h1>Menu</h1>
</div>
<div class="form">
<h1>Form</h1>
</div>
</div>
</body>
</html>
Maybe this could be achieved without margins but with layouts or another workaround, any idea is welcome though.
You can wrap your class="form" element inside of another div with class="form-container". And add the following css:
.form-container{
width:100%;
height:100%;
display:flex;
justify-content:center;
}
I have a project and I am having trouble fitting everything inside the body. Child elements always go outside of the body, when I looked at my code it looks like okay, so I made an experiment; I trace each HTML element by giving them a border, so that I can see them visually how they will behave. This is what I have so far.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<title>A nice example</title>
</head>
<body>
<div class="box">
<div class="childbox"></div>
</div>
</body>
</html>
CSS Example 1, setting 100% height for everything
html{height: 100%; border: 5px solid black; padding: 5px;} /*black*/
body{height: 100%; border: 5px solid red; padding: 10px;} /*red*/
.box{height: 100%; border: 5px solid green; padding: 5px;} /*green*/
.childbox{height: 100%; border: 5px solid pink} /*pink*/
Output : everything overflows outside html.
CSS Example 2, setting 100% height for the body and its child's, except html
html{border: 5px solid black; padding: 5px;} /*black*/
body{height: 100%; border: 5px solid red; padding: 10px;} /*red*/
.box{height: 100%; border: 5px solid green; padding: 5px;} /*green*/
.childbox{height: 100%; border: 5px solid pink} /*pink*/
Output : Everything fits inside html, but doesn't occupy the full height of the screen. I know I can do this by making the body min-height: 100vh.. but it will stop expanding when the 100vh is full..
My goal is,
to make the body and html 100% in height / not using vh.
and not overflow outside the body, or html
when adding child elements I want everything from html to body expands in height dynamically and not go outside and overflow, or overlaps each other..
the body should be inside html, and the div's should be inside the body.
Please help.
This is what is happening, the CSS is calculating 100% width and height and then it adds a 10px / 5px padding after which causes the elements to overflow by 10 / 5px.
You can change this by adding the following css at the beginning of your code:
* {
box-sizing: border-box;
//Edit:
margin: 0;
padding: 0;
}
This will make sure that the padding is accounted for in the 100% width and height.
Hope this works!
Edit:
Also, what you are looking for in the html and body style is height: auto; not 100%.
If its happening it means that you are not following CSS box model during styling your sheet. you can also use box-sizing property of CSS.
Consider an example
<div id="frame">This is the frame
</div>
Then use box-sizing property and set its value to border-box.
<style>
#frame{ width: xx% height:yy%; box-sizing:border-box; }
</style>
Sorry, if my problem is a little bit too specific, but I have not found the answer anywhere else. On my website, there is a header that is supposed to take up the whole width of the screen, but it does not. There is always a blank space between the top, and the sides. I have tried display: block; min-width: 100%, just width: 100% and many more variations but I just can't find out how to get rid of it. Anybody have ideas? Thanks!
FULL CODE
/* GLOBAL */
body {
/*background-color: #1abc9c;
display: block;
min-width: 100%;*/
}
#content {} header {
display: block;
min-width: 100%;
height: 100px;
background-color: #34495e;
border-top: 5px solid #1abc9c;
}
<!DOCTYPE html>
<html>
<head>
<title>Example Website</title>
</head>
<body>
<div id="content">
<header>
<img src="REPLACE.png" />
</header>
</div>
</body>
</html>
By default, the browser adds some margin to body element. Thus to fix it, add margin:0; to your body CSS.
body {
margin:0;
}
JSfiddle demo
I tried to style container full width and height border line, in pc version it is ok, but test on iPhone, there is a little space(10px) in right side.
But only in vertical mode will see this happen, rotate to horizontal is ok.
Why? How to solve it?
UPDATE
I tried add box-sizing:border-box not work.
And right now I'm using overflow: hidden (Responsive website on iPhone - unwanted white space on rotate from landscape to portrait) to not let user scroll to see white space, but the space between container border line and content, right side is smaller. So I set content margin-right bigger than left make it still looks like center.
But I want to know why and find perfect way
Is it something wrong related I using meta tag? if I remove meta tag it is fine both vertical and horizontal mode
html, body {
width: 100%;
height: 100%;
}
.container {
width: 100%;
min-height: 100%;
border: 10px solid #000000;
}
.content {
width: 100%;
margin: 0 auto;
}
html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
</head>
<body>
<div class="container">
<div class="content"></div>
</dvi>
</body>
</html>
Html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
</head>
<body>
<div id="solution" class="container">
<div class="content"></div>
</div>
</body>
</html>
CSS
html, body {
width: auto;
height: 100%;
}
.content {
width: 100%;
margin: 0 auto;
background:#000;
height:200px;
}
.container {
width: 100%;
padding: 10px;
border: 30px solid #999;
}
#solution {
box-sizing: border-box;
}
check below fiddle http://jsfiddle.net/manjunath_siddappa/53grcpdv/,
i hope, it may help you.
Your container has 100% width + 1px border on each side thus making it bigger than 100%.
Try one of these solutions:
.container{
box-sizing: border-box;
}
.container{
width: calc(100% - 2px);
}
.container{
max-width: 100%;
}
I'm trying to get that my web page appears a horizontal scrollbar when the user shrink his/her browser, but instead everything is getting shrink, but that's not the way I would like, I have try it a lot of things (such as overflow-y etc.) here is my website (try to resize it):
http://prepaestatal9.site11.com/news.php
here is the html code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="shortcut icon" href="images/favicon.ico">
<link href="styleregistration.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<body>
<div id="mainBlank">
<h1 style="text-align: center;">Noticias</h1>
<div id="refresh"><table style="width:50%;"><tr><td colspan='2' style='background-color:#f96267;'>no se</td></tr><tr><td style='background-color:#bde0e4;'>no importa</td> <td style='background-color:#bde0e4;'>2014-01-02 19:22:38</td></tr><tr><td colspan='2' style='background-color:#885878; text-align:center;'>nueva noticia<br />
no hay clase</td></tr><tr style='height:40px; border-left:none;'></tr><tr><td colspan='2' style='background-color:#f96267;'>yoooo</td></tr><tr><td style='background-color:#bde0e4;'>dssd</td> <td style='background-color:#bde0e4;'>2014-01-02 19:16:39</td></tr><tr><td colspan='2' style='background-color:#885878; text-align:center;'>ds<br />
ds</td></tr><tr style='height:40px; border-left:none;'></tr><tr><td colspan='2' style='background-color:#f96267;'>hih</td></tr><tr><td style='background-color:#bde0e4;'>bhj</td> <td style='background-color:#bde0e4;'>2014-01-02 19:16:12</td></tr><tr><td colspan='2' style='background-color:#885878; text-align:center;'>ft<br />
yf<br />
yt</td></tr><tr style='height:40px; border-left:none;'></tr></table></div>
</div>
</body>
</html>
a simple table inside a div called mainBlank inside the body
and here is the css codestyleregistration.css
#font-face
{
font-family: yano;
src: url(fonts/yano.woff);
}
body {
width: 100%;
font-family:yano;
background-image: url(images/dirtyred.png);
background-repeat:repeat;
position:relative;
margin: 0;
}
#mainBlank{
border-radius:5px;
background-image: url(images/word.png);
-moz-box-shadow: 10px 10px 5px #888888;
-webkit-box-shadow: 10px 10px 5px #888888;
box-shadow: 10px 10px 5px #888888;
margin-left: 10%;
margin-right: 20%;
margin-top: 15%;
/*margin-bottom: 1%;*/
height: 30%;
color: black;
padding-top: 1%;
padding-bottom: 1%;
padding-left: 1%;
padding-right: 1%;
}
and thanks for the help.
You are doing everything in percentages of the browser size. Your margins left, right, etc and even your height.
It looks alright, but everything is simply going to be a percentage of the browser width. So, when you resize it, everything else will resize as well. No one can really give you specific code, because you are the designer of your website. Try giving your #mainBlank
width:700px;
margin:auto;
and removing all of the margin and padding values. Adjust from there.
I would suggest trying the solution #Adonis K has provided.
overflow-y: scroll
forces a vertical scroll bar.
That being the the case I would assume that
overflow-x: visible
could work for horizontal although I have not used this (I believe in no Horizontal scroll bars due to aesthetics)
If that doesn't work try
overflow-x: scroll
or alternatively
html {
overflow-x: scroll;
}
or
html {
overflow-x: visible;
}
You should use overflow-x for that:
#mainBlank {
overflow-x: visible;
}
"The overflow CSS property specifies whether to clip content, render scroll bars or display overflow content of a block-level element."
Documentation | Demo
Another solution is to use a static width like #smts mentions but instead of just a static value you could use something like this:
#mainBlank {
width: 700px;
margin: auto;
max-width: 100%;
}
This way, if the width of the element is larger than the width of the screen, then it will shrink down to the screen's maximum width.