在body上使用html的高度，在chrome上使用默认的margin [英] height of html with body and default margin on chrome

问题描述

您可能知道，Chrome的默认机构页边距 8px 。

<但是，当我在正文上保留边距并将其高度设置为 100％ 时（以及html处的 100％ ）。它取html的高度，并将其放在 8px 的上边距之后，并以 <$ c $的底边距结束C> 8像素 即可。但是，html大小不适应16像素差异（前8位+下8位）。

我认为这与文档流的工作方式有关，html的大小在body之前分配，但我没有任何线索如何解决问题。

我认为我可以解决这个问题的唯一方法是在html height属性上执行 calc（） notation ： height：calc（100％+ 16px）但不起作用。如果你知道为什么它不是我想告诉我的。

代码来复制问题：

CSS

  html {
 height：100％; 
背景：rgb（42,69,66）; 
 background：-webkit-linear-gradient（top，rgba（73,94,8,1）0％，rgba（145,232,66,1）100％）no-repeat; 
} 
 
 body {
 height：100％; 
} 
 
 .divz {
 background-color：olive; 
身高：100％; 
 
  

HTML

 <身体GT; 
< div class =divz>< / div> 
< / body> 
  

这是一个jsfiddle ，它复制了这个问题。请注意底部是如何在页面结束和html结束之间有一个 16px 间距。

编辑：我希望保证金保持在正文上。

EDIT 2：我尝试的另一件事是将 min-height：100％设置为 html ，它做我想做的，但设置 min-height：100％到 body 不起作用设置为html。

解决方案

因为我相信你想保持外部渐变，我不认为设置 margin：0 和/或 padding：0 会有帮助，因为它会移除渐变边框效果，但您可以这样做：

JS小提琴 和 IE11

    -   body {height：calc（100％ -  16px）; } 
  

---

更新

正如上面的评论所述，作为其他答案，如果内容超出窗口高度，则不会包装内容以解决此问题我们需要结合 calc（） 和视口单元 vh .divz div来说， ^（*），因为CSS需要这些行：

  html {min-height：100％; } 
 
 body {height：100％; } 
 
 .divz {
 padding：5px; 
 / *** 
全视图高度 -  
 {（8px * 2）默认顶部和底部填充+（5px * 2）.divz顶部和底部填充} 
 = 100vh -  26px 
 *** / 
 min-height：calc（100vh  -  26px）; 
} 
  

JS小提琴2 - 更新 - 在上进行了测试> Chrome47，Firefox43 和 IE11

完整密码： - 已更新

html {min-height：100％;背景：rgb（42,69,66）;背景：-webkit-linear-gradient（top，rgba（73,94,8,1）0％，rgba（145,232,66,1）100％）no-repeat;} body {height：100％;}。divz {background-color：olive; min-height：calc（100vh - 26px）; padding：5px;}

 < div class =divz >糖果藤条巧克力蛋糕。 Dragée饼干糕点。芝麻馅饼蛋白杏仁饼干羊角面包芝士卷芝麻馅饼芝士卷。燕麦蛋糕棉花糖晶圆halvah挞巧克力蛋糕羊角面包饼干。芝麻攫取胡萝卜蛋糕chupa chup糕点。丹麦萝卜糖果枣甜点羊角面包糖果果冻-o。熊爪焦糖打顶。糖果糖果果冻粉gummi熊。果冻o棉花糖水果蛋糕糕点苹果派太妃糖粉布丁。甜点糖果棉花糖甜甜圈。 Gummi熊甜点蛋糕蛋糕糖果蛋奶酥蛋奶酥。棒棒糖松饼蛋白软糖胡萝卜蛋糕糕点甜。蛋白杏仁糖凝胶饼干棒棒糖糖果巧克力糖果冻豆浆。甜饼干甘草饼干巧克力棒冰淇淋布丁芝士蛋糕。冰淇淋杏仁蛋糕柠檬滴。蛋白杏仁饼干gummies胡萝卜蛋糕芝士蛋糕水果蛋糕糖果手杖焦糖巧克力棒。水果蛋糕巧克力棒soufflé甜甜圈soufflé顶级甜松饼。巧克力巧克力棒杏仁糖焦糖甜点糖果手杖蛋白杏仁饼干燕麦蛋糕松饼。蛋糕饼干halvah果冻豆布朗尼糖果巧克力蛋糕蛋白杏仁饼干。薄酥饼小杏仁饼巧克力棒小杏仁饼熊爪糖梅子。糖李子柠檬滴水果蛋糕结冰熊爪巧克力棒。棉花糖芝麻馅饼芝麻馅饼糕点蛋糕tootsie卷燕麦蛋糕。蛋糕巧克力棒蛋糕蛋挞糖果枣。蛋白杏仁饼干松饼甜点糖果松饼冰淇淋奶糖棒棒糖挞。甘草糖梅花棒棒糖。芝麻馅饼水果蛋糕挞甜点挞薄脆饼干果冻豆tootsie卷。棉花糖gummi熊蛋糕棉花糖soufflé。软心豆粒糖顶级蛋奶酥派饼干晶圆布朗尼。松饼糖霜halvah饼干糖果芝麻饼干。棉花糖提拉米苏甜蜜糖果tootsie卷粉末tootsie卷糖果水果蛋糕。结冰饼干tootsie卷。派甜甜圈杏仁饼。芝麻馅饼糖果糖果棉花糖焦糖胡萝卜蛋糕熊爪。水果蛋糕棉花糖gummi熊吃糖果甘草糖果冻。糖果焦糖甜卷。熊爪蛋挞杏仁饼干冰淇淋糖果。燕麦蛋糕tootsie卷芝麻攫取熊爪顶部gummies。苹果馅饼果冻豆gummi熊蛋糕棉花糖糖果。巧克力棉花糖甜卷提拉米苏糖果姜饼甘草纸杯蛋糕蛋糕。甜卷曲奇糖熊。新月形面包gummi熊halvah。熊爪焦糖糖霜棉花糖甜燕麦蛋糕饼干。甜卷甜甜圈枣糖糖李子甜甜圈松饼派。蛋白杏仁饼干提拉米苏tootsie卷冰淇淋熊爪饼饼布丁饼干。果冻o gummi熊冰淇淋棉花糖糖李子糖李子焦糖糖果。 Gummi熊巧克力奶酪蛋糕甜点。太妃糖胡萝卜蛋糕糖果杏仁糖胡萝卜蛋糕打顶糖果蛋糕糖果。 Tootsie卷巧克力蛋糕粉提拉米苏。熊爪巧克力果冻羊角面包甘草糖tootsie卷巧克力果冻-o柠檬滴。焦糖饼干饼苹果派杏仁糖提拉米苏果冻巧克力棒。朱帕chups果冻o巧克力提拉米苏。布丁果冻蛋糕。 Halvah糖果手杖芝麻攫取布朗尼chupa chups gummies糖果熊爪。甜蛋糕松饼甜蛋糕甘草精。丹麦巧克力糖果蛋白杏仁饼干蛋糕布朗尼。糕点甘草提拉米苏粉冰淇淋gummies糕点。松饼果冻-o柠檬滴棒棒糖糖果甘蔗甜。 Soufflé布丁冰淇淋甜面包卷。甜点饼干甜点蛋糕甜gummies芝麻扑克。 Chupa chups胡萝卜蛋糕蛋糕柠檬滴糖果饼干。软糖甜面包糖霜燕麦蛋糕饼干松饼布丁。 Tootsie卷太妃糖胡萝卜蛋糕甜甜圈结冰甜面包棒棒棒糖。糖李子水果蛋糕蛋糕果冻羊角面包提拉米苏蛋糕甜甜圈。硅片gummi承担甜卷。芝麻饼干饼干胡萝卜饼饼干。甘草糖焦糖糖果水果蛋糕。果冻豆布丁太妃糖棒棒糖布丁燕麦蛋糕甜。 < / div>  

巧克力丹麦果冻 - -------------------------------------------------- ------------------------------

^{（* ）} 请注意，如果您要定位旧版本的浏览器（如 IE8 及以下版本），并且android< 4.3，那么你需要有JavaScript代码作为后备。

As you might know, Chrome has a default body margin of 8px.

However, this poses an issue when I keep the margin on the body and set its height to 100% (along with html at 100%). It takes the height of html and places it after the top margin of 8px, and ends with a bottom margin of 8px. However the html size doesn't adapt to the 16 pixel difference (top 8 + bottom 8).

I'm thinking this has to do with how the document flow works, html having its size assigned before body does, but I do not have any clue how to fix issue.

The only way I thought I could fix this was to do calc() notation on the html height attribute: height: calc(100% + 16px) but doesn't work. If you know why it doesn't I would like to be told.

code to replicate the issue:

CSS

html {
height: 100%;
background: rgb(42,69,66);
background:  -webkit-linear-gradient(top, rgba(73,94,8,1) 0%, rgba(145,232,66,1) 100%) no-repeat;
}

body {
    height:100%;
}

.divz {
    background-color: olive;
    height: 100%;
}

HTML

<body>
   <div class="divz"></div>
</body>

Here is a jsfiddle that replicates the issue. Notice at the bottom how theres a 16px spacing between the end of the page and the end of html.

EDIT: I want the margin to stay on body.

EDIT 2: another thing I attempted is to set the min-height: 100% to the html, which does do what I want but setting min-height: 100% to body doesn't work if it is set to html.

解决方案

As I believe you want to keep the outer gradient I don't think setting margin:0 and/or padding:0 will help since it will remove the gradient border effect, but you can do it like this:

JS Fiddle - tested on Chrome, Firefox and IE11

body { height:calc(100% - 16px); }

---

UPDATED

As stated in a comment the above, as the other answer, won't wrap content if the content exceeds the window height, to fix this we need a combination of calc() and viewport unit vh ^(*) for the .divz div , as you can CSS need to have these lines:

html { min-height: 100%; }

body { height:100%; }

.divz { 
    padding:5px;
    /***
    full view height - 
          { (8px*2) default top and bottom padding + (5px*2) .divz top and bottom padding } 
    = 100vh - 26px
    ***/
    min-height:calc(100vh - 26px); 
}

JS Fiddle 2 - updated - tested on Chrome47, Firefox43 and IE11

Full Code : -updated

html {
    min-height: 100%;
    background: rgb(42,69,66);
    background:  -webkit-linear-gradient(top, rgba(73,94,8,1) 0%, rgba(145,232,66,1) 100%) no-repeat;
}

body {
    height:100%;
}

.divz {
    background-color: olive;
    min-height:calc(100vh - 26px);
    padding:5px;
}

<div class="divz">
  Candy canes dragée chocolate cake. Dragée cookie pastry. Sesame snaps macaroon croissant tootsie roll sesame snaps tootsie roll. Oat cake cotton candy wafer halvah tart chocolate cake croissant cookie. Sesame snaps carrot cake chupa chups pastry. Danish
  dragée bonbon jujubes dessert croissant bonbon jelly-o. Bear claw caramels topping. Candy candy candy jelly powder gummi bears. Jelly-o cotton candy fruitcake pastry apple pie toffee powder pudding. Dessert bonbon marshmallow donut. Gummi bears dessert
  cake cake gummies dragée soufflé. Candy canes muffin marshmallow carrot cake pastry sweet. Macaroon jelly-o icing biscuit lollipop bonbon chocolate bar jelly beans icing. Sweet biscuit liquorice cookie chocolate bar ice cream pudding cheesecake. Ice
  cream marzipan cheesecake lemon drops. Macaroon gummies carrot cake cheesecake fruitcake candy canes caramels chocolate bar. Fruitcake chocolate bar soufflé donut soufflé topping sweet muffin. Chocolate chocolate bar marzipan caramels dessert candy
  canes macaroon oat cake muffin. Cake cookie halvah jelly beans brownie candy chocolate cake macaroon. Wafer marzipan chocolate bar marzipan bear claw sugar plum. Sugar plum lemon drops fruitcake icing bear claw chocolate bar. Marshmallow sesame snaps
  sesame snaps pastry cake tootsie roll oat cake. Cake chocolate bar cake tart tart bonbon jujubes. Macaroon muffin dessert candy muffin ice cream toffee lollipop tart. Liquorice sugar plum lollipop. Sesame snaps fruitcake tart dessert tart wafer jelly
  beans tootsie roll. Cotton candy gummi bears cupcake cotton candy soufflé. Jelly beans topping soufflé pie wafer wafer brownie. Muffin icing halvah cookie candy sesame snaps cookie. Cotton candy tiramisu sweet bonbon tootsie roll powder tootsie roll
  bonbon fruitcake. Icing cookie tootsie roll. Pie donut marzipan. Sesame snaps pastry bonbon bonbon marshmallow caramels carrot cake bear claw. Fruitcake cotton candy gummi bears dragée liquorice toffee jelly. Candy caramels sweet roll. Bear claw tart
  macaroon cookie ice cream candy. Oat cake tootsie roll sesame snaps bear claw topping gummies. Apple pie jelly beans gummi bears cupcake cotton candy candy. Chocolate marshmallow sweet roll tiramisu candy gingerbread liquorice cupcake cake. Sweet roll
  cookie gummi bears. Croissant gummi bears halvah. Bear claw caramels icing cotton candy sweet oat cake cookie. Sweet roll donut jujubes sugar plum donut muffin pie. Macaroon tiramisu tootsie roll ice cream bear claw wafer cake pudding biscuit. Jelly-o
  gummi bears ice cream marshmallow sugar plum sugar plum caramels candy. Gummi bears chocolate bar cheesecake dessert. Toffee carrot cake candy marzipan carrot cake topping candy cake dragée. Tootsie roll chocolate cake powder tiramisu. Bear claw chocolate
  jelly croissant liquorice tootsie roll chocolate bar jelly-o lemon drops. Caramels biscuit pie apple pie marzipan tiramisu jelly-o wafer chocolate bar. Chupa chups jelly-o chocolate tiramisu. Pudding jelly cupcake. Halvah candy canes sesame snaps brownie
  chupa chups gummies candy bear claw. Sweet cupcake muffin sweet cake liquorice. Danish chocolate bar dragée macaroon cake brownie. Pastry liquorice tiramisu powder ice cream gummies pastry. Muffin jelly-o lemon drops lollipop candy canes sweet. Soufflé
  pudding ice cream sweet roll. Dessert biscuit dessert cake sweet gummies sesame snaps. Chupa chups carrot cake cupcake lemon drops bonbon cookie. Gummies sweet roll icing oat cake cookie muffin pudding. Tootsie roll toffee carrot cake donut icing sweet
  roll topping lollipop. Sugar plum fruitcake cupcake jelly croissant tiramisu cake donut. Wafer gummi bears sweet roll. Sesame snaps biscuit carrot cake wafer. Liquorice caramels dragée tootsie roll fruitcake. Jelly beans pudding toffee lollipop pudding
  oat cake sweet. Chocolate danish jelly-o bear claw.
</div>

--------------------------------------------------------------------------------

^(*) Note that if you're going to target older browsers like IE8 and below and android < 4.3 as well then you need to have javascript code as fallback.

这篇关于在body上使用html的高度，在chrome上使用默认的margin的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！