发表新帖
发表新帖

Problem calculating percentage for body width

后端 未结
关注
6 1031
無奈伤痛
無奈伤痛 2021-01-16 20:20

I need to build a classic 960px layout and I have to convert that 960px into %. So, I should use 960px / 16px = 60%, right?

Note: 960px =

相关标签:
6条回答
  • 长情又很酷
    2021-01-16 20:21

    same problem on both safari and chrome, but works perfectly on ff, ie-6-9 and opera it doesn't matter whether i use css or 'bad' html. First td is 133 px, second is 869px, and total width is 1001px (?), with 0 cellspacings and cellpaddings. The reason was too small info in cells. I added .td_left{min-width: 200px} .td_right{min-width: 800px}

    0 讨论(0)
  • 独厮守ぢ
    2021-01-16 20:23

    This is how you can solve this:

    consider body to be 90% which would mean 90% of the screen whatever be the size.

    body{
width:90%;
margin: 0 auto;
}

    Now consider a class container within the body tag

    .container{
width:100%  //This would utilize the complete 90% of the body, if you make the width 90% for container then it would consider 90% of 90% of body
margin: auto;
}

    Now Consider you need a 5 column grid layout and you decide you have a gutter of 2px between each column then 100% - (2%+2%+2%+2%) = 92% (I didn't added one more 2% is because you are going to have margin-left or margin-right = 0)

    Now, divide 92/5 (percentage/columns) you would get an value of 18.4%. This would mean allocate 18.4% of width to each column you create and you would get the perfect layout you want.

    Here is an example that can explain you, copy the entire code and paste in a blank file and save it as index.html or any name and run: 

    <!DOCTYPE html>  
<html lang="en">
<head>
<title>Percentage Width</title>
<meta charset="utf-8">  
<meta name="description" content="Demo">
<style type="text/css" media="screen">
* { margin:0; padding:0; }
body{
width:100%;
margin: 0 auto;

}

.container{
width:90%;
margin:auto;
text-align:center;
background: #363F3C;
overflow: hidden;
}

.column_5{
overflow: hidden;
width:100%; // This means full 90% of the parent element .container
}

.grid_1,.grid_2,.grid_3,.grid_4,.grid_5{
background:#399FDD;
width:18.4%;
margin: 0 2% 2% 0;
float:left;
}

.grid_5{
margin-right:0;
}

p{
color:#505054;
text-align:left; 
padding:1.5em;
}
</style>
<body>

<div class="container">
<div class="column_5">
<div class="grid_1"><p>1st Column: <br />184px/1000px <br />18.4% </p></div>
<div class="grid_2"><p>2nd Column: <br />184px/1000px <br />18.4% </p></div>    
<div class="grid_3"><p>3rd Column: <br />184px/1000px <br />18.4% </p></div>    
<div class="grid_4"><p>4th Column: <br />184px/1000px <br />18.4% </p></div>    
<div class="grid_5"><p>5th Column: <br />184px/1000px <br />18.4% </p></div>        
</div>
</div>

</body>

</html>

    Run the above example and play a bit more and you should get a good grasp. If you further need help feel free to contact me.

    Regards, Udit Goenka http://www.iuditg.com

    0 讨论(0)
  • 北荒
    2021-01-16 20:32

    The right way to calculate body width in a fluid layout: 

    body {
    width:100%;
    max-width:960px;
    height:100%; 
    margin:0 auto;
}

    The max-width value should be whatever your page width is, and margin does not need a page wrap.

    0 讨论(0)
  • 独厮守ぢ
    2021-01-16 20:36

    You will need the screen size in order to calculate the percentage 960px will take on that screen. (100/screensize)*960 = %

    0 讨论(0)
  • 余生分开走
    2021-01-16 20:43

    Also, a really good article on "Fluid Grids" that includes managing type, etc.

    From A List Apart: Fluid Grids "However, our client had one last, heart-stopping requirement: the design had to be fluid and resize with the browser window. Normally, this would cause me to rejoice both noisily and embarrassingly. Fluid layouts are an undervalued commodity in web design. They put control of our designs firmly in the hands of our users and their browsing habits. They’ve also utterly failed to seize the imagination of web designers."

    0 讨论(0)
  • 南方客
    2021-01-16 20:48

    Look at this: http://pxtoem.com/

    0 讨论(0)
 看不清?
提交回复
热议问题