1

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>
Community
  • 1
  • 1
user1775888
  • 3,147
  • 13
  • 45
  • 65
  • 1
    Your container is 100% width and has a border thus a bit smaller than 100% width. Use `box-sizing: border-box;` – Leeish Sep 23 '14 at 22:35
  • It shouldn't be fine even on PC, because UAs apply a `margin` to `` and also the computed `height`/`width` of the `.container` exceeds the available space of `` because of added border. Try this: http://jsbin.com/nocewi/1/edit – Hashem Qolami Sep 23 '14 at 22:37
  • thanks reply add box-sizing and set margin 0 nothing change, not work... I still can scroll to right see the space – user1775888 Sep 23 '14 at 22:50
  • 1
    Don't know if it will solve your problem, but you havet an error in your CSS: body{} is inside the html {} – Johan Karlsson Sep 23 '14 at 22:56
  • `box-sizing:border-box;` works trying use it like this `*{margin:0px;padding:0px;box-sizing: border-box;-ms-box-sizing: border-box; -webkit-box-sizing: border-box;-moz-box-sizing: border-box}` my concern is that trying use property hack on mozilla,chrome and safari – Rohit Sep 24 '14 at 13:09

2 Answers2

2

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.

Manjunath Siddappa
  • 2,126
  • 2
  • 21
  • 40
0

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%;
}
Johan Karlsson
  • 6,419
  • 1
  • 19
  • 28
  • thanks for reply, I tried each one but not work.. I still can scroll to right see the space – user1775888 Sep 23 '14 at 22:53
  • OK try adding this too: `.container{overflow: hidden;}` – Johan Karlsson Sep 23 '14 at 23:53
  • I tried this before, but white space still in there just hidden so if the content inside container is margin:0 auto it still not be center. space between content and outline right side is smaller. I also tried move content margin-right the container border line width , but I tried to find best way fix this problem and know why? – user1775888 Sep 24 '14 at 09:20