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%;
}
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;
}
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 1 year ago.
I don't understand why there is a scroll in the body and a space after the block .example. According to my logic, I make the margin-bottom 100px and then subtract these 100px from the block height max-height: calc(100% - 100px);
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.example {
padding: 20px;
width: 60%;
margin: 100px auto 0;
max-height: calc(100% - 100px);
border: 1px solid black;
overflow-y: scroll;
}
p{
padding: 100vh 0;
}
</style>
</head>
<body>
<div class="example">
<div class="text">
<p>Lorem</p>
<p>Lorem</p>
</div>
</div>
</body>
</html>
You're running into wildly inherited margins problem derived from the popular collapsed margins - issue (which is better known for when two elements with vertical margins, the two colliding margins collapse into one) - not your exact case but same in nature.
Read more on w3.org Collapsing Margins
Since you used html, body {height: 100%} and the tall .example element has margin-top 100% - the body element moved, collapsed 100px down! It basically "wildly" inherited (at least visually) those 100px margin.
An element with vertical margin can cause unwanted results with ancestors flow. One common way to fix this is to smartly avoid vertical margin, or to add overflow: auto to the ancestor that's being affected by that problem html, body in your specific case.
html, body {
height: 100%; /* Why would you want this? */
overflow: auto; /* FIX for wild margins */
}
The other solution (I'm sure there are many others) is to not use html, body {height: 100%}
Rather min-height (if really needed) on html and body and vh (viewport height) unit on the .example element
html, body {
/* min-height: 100%; /* use min-height, but not needed */
}
.example {
/* .... other styles */
margin: 100px auto 0;
height: calc(100vh - 100px); /* 100vh minus 100px margin-top */
}
Long story short - Be careful when using margin. I personally use it only when working with flexbox, or in the horizontal space (often when using inline-block elements) otherwise I always use wrappers with padding to create desired spacings which are perfectly controlled thanks to box-sizing: border-box (no need to calculate anything) - or when really necessary- I treat them with special care.
Get rid of the padding on the p elements:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.example {
padding: 20px;
width: 60%;
margin: 100px auto 0;
max-height: calc(100% - 100px);
border: 1px solid black;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="example">
<div class="text">
<p>Lorem</p>
<p>Lorem</p>
</div>
</div>
</body>
</html>
Right answer its a Collapsing margins xD. To solve the problem, you can add one of the following to the body:
border
padding
overflow
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 2 years ago.
I am making my first web application. It is my first time working with html/css/js. This seems to be a common question/issue with css, but I have trouble understanding/making the solution work. This is the closest I've gotten.
I am struggling to make the app (specifically wrapper or body) encompass only the height of the page (no more or less).
If there is little content, content doesn't extend all the way down and the footer is at the middle of the page. Although, adding height: 100%; to html seems to fix this.
If I add a lot of lines to calendar or sidebar, a scroll bar is added to the whole page instead of only calendar or sidebar. height: 100%; in html doesn't seem to fix this.
The width for content seems to work well.
I have tried changing the height for body and wrapper but it doesn't seem to do anything?
Adding overflow: hidden; to body doesn't seem to work either.
Help is appreciated. Thank you.
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
#wrapper {
display: flex;
flex-flow: column;
height: 100%;
}
header {
text-align: left;
flex: 0 0 auto;
padding: 20px;
}
#content {
display: flex;
flex-flow: row;
width: 100%;
flex: 1 1 auto;
}
#sidebar {
float: left;
overflow-y: auto;
padding: 20px;
flex: 0 0 20%;
background-color: #00e7eb;
}
#calendar {
float: left;
overflow-y: auto;
padding: 20px;
flex: 1 1 auto;
background-color: #c8eed6;
}
footer {
text-align: center;
flex: 0 0 auto;
padding: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Journal</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="wrapper">
<header>
<h1 id="currentCalendar">Quarter</h1>
</header>
<div id="content">
<div id="sidebar">
<h4>Calendars</h4>
<button>+ Add Calendar</button>
<h4>Classes</h4>
<button>+ Add Class</button>
<h4>Tags</h4>
<button>+ Add Tags</button>
</div>
<div id="calendar">
<p>No calendar. Click '+ Add Calendar' to make new calendar.</p>
</div>
</div>
<footer>
<p>dg</p>
<button>Donate</button>
</footer>
</div>
</body>
</html>
I would go with min-height: 100vh;. Should be noted though, 100vh can be tricky when it comes to mobile depending on your design. You can also try
html, body { min-height: 100%; }
Try adding height: 100vh; to the target element.
in CSS height % values only work if the parent container has a set height. So if you want to adjust the main body to 100% display height you can do:
body{
height: 100vh; /*viewport-height=100% of screen height*/
}
and then you can set the first child of that to 100%
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.
How do I make my centered div with a max width use a viewport so that it appears full-width on mobile devices? I have looked around and see examples of this but cannot tell what I am doing that makes this not work
My code is provided, thank you.
<html>
<head>
<title>
mxwl
</title>
<style>
.container {
margin: auto auto 0;
max-width: 500px;
padding: 30px;
}
</style>
<meta name="viewport" content="initial-scale=1">
</head>
<body>
<div class="container">
</div>
</body>
</html>
#media (max-width: 500px){
.container{
margin: auto auto 0;
width: 100%;
padding: 30px;
max-width:100%;
}
}
Try and replace your code with the above code.I think i'll work