保证金

事业部高度填充容器看看我的HTML和CSS：保证金

html , body{ 
    width: 100%; 
    height: 100%; 
    margin: 0 0 0 0;  
} 

.wrapper { 
    background: -webkit-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%); 
    background: -o-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%); 
    background: -ms-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%); 
    background: -moz-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%); 
    background: linear-gradient(to bottom, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%); 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    overflow: auto; 
} 

.content { 
    margin: 10px auto 20px auto; 
    width: 724px; 
    border: black 1px solid; 
}

HTML：在默认情况下采取的窗口的宽度和高度的窗口作为其大小

<body> 
    <div class="wrapper"> 
     <div class="content"> 

     </div> 
    </div> 
</body>

我的包装的div。我想我的内容div始终填充包装高度并保留其边距，问题是我无法设置内容div的高度= 100％，因为它有余量，并会使包装div溢出。 Here是我的jsfiddle

编辑

实施例阐明了一个问题：

假设div.wrapper的高度= 200像素

div.content的高度将是200 - （10 + 20） = 170px

我知道我可以通过jquery做到这一点，但我想用html/css找到解决方案

注意：div.wrapper的高度取决于用户屏幕分辨率。

求解

感谢您的球员的关注！对此，我真的非常感激。我通过使用css3 calc函数找到了解决方案here。我认为这些信息对你有帮助。

来源

2013-05-16 Doan Cuong

对不起，我真的不明白你的问题，你不能只删除保证金？ – Raver0124

我想保留保证金。这就是为什么我无法设置内容div的高度= 100％。关于这个问题。让我以身作则澄清。假设'wrapper div'的height = 200px，所以'content div'的height = 200 - （10 + 20）= 170px。我可以通过jquery在页面加载，但我想通过纯html/css实现它 –

你有没有尝试浮动的div，以便它填充其父元素？ – oshikryu

检查这个小提琴http://jsfiddle.net/sarfarazdesigner/T7D32/9/

更新小提琴http://jsfiddle.net/sarfarazdesigner/T7D32/13/

我已经在你的CSS代码做了一些细微的变化在这里是

html , body{ 
    width: 100%; 
    height: 100%; 
    margin: 0;  
} 

.wrapper { 
    background: -webkit-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%); 
    background: -o-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%); 
    background: -ms-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%); 
    background: -moz-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%); 
    background: linear-gradient(to bottom, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%); 
    position: absolute; 
    left:0; 
    right:0; 
    top:0; 
    bottom:0; 
    overflow: auto; 
    padding:10px 0 20px 0; 
} 

.content { 
    margin:0 auto; 
    width: 724px; 
    border: black 1px solid; 
    height:100%; 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
}

，将工作让我知道如果你有任何问题

来源

2013-05-16 04:35:57

有一个问题。当你设置'height：100％'时，内容div溢出，我不想要这种行为。我希望它适合内部父母没有溢出 –

@DoanCuong，因为你使用'边框'这一点，你可以使用'border-box'属性，它会工作 –

@DoanCuong现在你可以检查我的更新答案 –

cha像这样的.content类的CSS，你的问题将得到解决。

.content { 
    margin: 10px auto 20px auto; 
    width: 724px; 
    border: black 1px solid; 
    overflow: auto; 
    height: 100% 
}

来源

2013-05-16 04:41:04

这里是Solution。

的HTML：

<body> 
    <div class="wrapper"> 
     <div class="content"> 

     </div> 
    </div> 
</body>

的CSS：

html , body{ 
    width: 100%; 
    height: 100%; 
    margin: 0 0 0 0;  
} 

.wrapper { 
    background: -webkit-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%); 
    background: -o-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%); 
    background: -ms-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%); 
    background: -moz-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%); 
    background: linear-gradient(to bottom, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%); 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    overflow: auto; 
} 

.content { 
    margin: 10px auto 20px auto; 
    width: 724px; 
    border: black 1px solid; 
    height:inherit; 
    overflow:auto; 
    background:blue; 
    width:auto; 
}

的问题是在内容类。如果你想要内容div包装包装div的高度，必须指定一个height:inherit;，它继承了其父div的高度。

希望这会有所帮助。

来源

2013-05-16 04:54:41 Nitesh

回答

相关问题