为什么我的保证金不适合持仓：固定？ [英] Why isn't my margin working with position: fixed?

问题描述

JSFiddle Demo

我有一个div用于内容包装的标题和div。

出于某种原因，我无法在标题底部留下一个页边空白来强制内容换行。它只是完全忽略它，我不知道为什么。

有人知道这是怎么回事吗？当我拿走这个位置时它不会这样做：固定的;属性的标题，但我希望它被固定在顶部，所以当滚动标题总是在视图中。

希望有人可以解释为什么会发生这种情况，或者至少是什么叫，所以我可以谷歌它。

  body {margin：0;填充：0; font-family：arial;背景：＃5A9910; text-align：center;} / * ==========================主页为页面== * / div.wrap {width：100 ％;保证金：0汽车; text-align：left;} / * ==========================带标识的标题== * / div.header {position：fixed;宽度：100％;背景：#ffffff; -webkit-box-shadow：0 8px 6px -6px＃333; -moz-box-shadow：0 8px 6px -6px＃333; box-shadow：0 8px 6px -6px＃333;} / * ========================== Header logo image == * / img。 headerlogo {width：30％;} / * ==========================内容包装== * / div.contentwrap {width：80％ ;身高：1600px;背景：#ccc; margin：0 auto;}  

 < div class =包裹> < div class =header> < p为H.页眉和LT; / p为H. < / DIV> < div class =contentwrap> < p为H.测试与LT; / p为H. < / div>< / div>  

解决方案

  div.header {
位置：固定; 
宽度：100％; 
背景：#ffffff; 
 top：20px; 
 -webkit-box-shadow：0 8px 6px -6px＃333; 
 -moz-box-shadow：0 8px 6px -6px＃333; 
 box-shadow：0 8px 6px -6px＃333; 
} 
  

并在内容div处指定保证金

  div.contentwrap {
 width：80％; 
 height：1600px; 
背景：#ccc; 
 margin：80px auto; 
} 
  

检查此小提琴是否需要如下作品：
https://jsfiddle.net/0cmvg92m/3/

JSFiddle Demo

I have a div for a header and a div for a content wrap.

For some reason, I can't have a margin on the bottom of the header that forces the content wrap to push down. It just ignores it completely and I have no idea why.

Does anyone know what is going on with this? It doesn't do this when I take away the position: fixed; attribute on the header, but I want it to be fixed at the top so when scrolling the header is always in view.

Hoping someone can explain why this happens or at least what it is called so I can google it.

body {
    margin: 0;
    padding: 0;
	font-family: arial;
	background: #5A9910;
	text-align: center;
}

/* ==========================Main wrap for page==*/
div.wrap {
	width: 100%;
	margin: 0 auto;
	text-align: left;
}

/* ==========================Header with logo==*/
div.header {
	position: fixed;
	width: 100%;
	background: #ffffff;
	-webkit-box-shadow: 0 8px 6px -6px #333;
	-moz-box-shadow: 0 8px 6px -6px #333;
	box-shadow: 0 8px 6px -6px #333;
}

/* ==========================Header logo image==*/
img.headerlogo {
	width: 30%;
}

/* ==========================Content wrapper==*/
div.contentwrap {
	width: 80%;
	height: 1600px;
	background: #ccc;
	margin: 0 auto;
}

<div class="wrap">
    <div class="header">
        <p>Header</p>
    </div>
    <div class="contentwrap">
        <p>Test</p>
    </div>
</div>

解决方案

i think you have to explictly declare the position of fixed div.

div.header {
position: fixed;
width: 100%;
background: #ffffff;
top:20px;
-webkit-box-shadow: 0 8px 6px -6px #333;
-moz-box-shadow: 0 8px 6px -6px #333;
box-shadow: 0 8px 6px -6px #333;
}

and assign margin at the content div

div.contentwrap {
width: 80%;
height: 1600px;
background: #ccc;
margin: 80px auto;
}

check this fiddle if works like you need: https://jsfiddle.net/0cmvg92m/3/

这篇关于为什么我的保证金不适合持仓：固定？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！