首页新闻找找看学习计划

css div height设置为100%,想设置padding怎么办,内部是一个图片,也需要100%,不能出现滚动条,怎么办?

0
悬赏园豆:10 [已解决问题] 解决于 2015-10-30 18:12

css div height设置为100%,想设置padding怎么办,内部是一个图片,也需要100%,不能出现滚动条,怎么办?

沧海一杰的主页 沧海一杰 | 初学一级 | 园豆:48
提问于:2015-10-23 14:59
< >
分享
最佳答案
0

可以将你的div的box-sizing设置为content-box;或者是border-box

收获园豆:7
木公2014 | 菜鸟二级 |园豆:215 | 2015-10-23 15:51

怎么弄,麻烦给个demo,谢谢!

沧海一杰 | 园豆:48 (初学一级) | 2015-10-23 16:02
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>height100%</title>
    <style>
        .container{
            background-color:purple;
            height: 120px;
        }
        .inner{
            height:100%;
            padding:10px;
            box-sizing:border-box;
            background-color: #fef;
        }
        img{
            height:100%;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="inner">
            <img src="vote-bg@2x.png" alt="this is a test png">
        </div>
    </div>
</body>
</html>

 

木公2014 | 园豆:215 (菜鸟二级) | 2015-10-23 19:27

@木公2014: 多谢,css3还有这功能,看来css3确实完美了。

沧海一杰 | 园豆:48 (初学一级) | 2015-10-30 18:11
其他回答(3)
0

你这让浏览器怎么给你算啊,外框要100%,内容也是100%,中间还得留个空。要不在内容上再加个DIV吧。

收获园豆:1
happydaily | 园豆:648 (小虾三级) | 2015-10-23 15:04

内容一般都会超过屏幕宽度和高度,这个div一定要自适应,呈现一个可能最大的窗口(所以要自适应),而且要出滚动条的。

支持(0) 反对(0) 沧海一杰 | 园豆:48 (初学一级) | 2015-10-23 15:25

@沧海一杰: 那你DIV不要设置高,设置min-height=像素值,这样没内容或者内容没一屏高自动是一屏,内容超过它会自己变的。

支持(0) 反对(0) happydaily | 园豆:648 (小虾三级) | 2015-10-23 16:00

@happydaily: 这个方案貌似不行的哦

支持(0) 反对(0) 沧海一杰 | 园豆:48 (初学一级) | 2015-10-23 16:03

@沧海一杰: <html>
<body>
    <div style="border:solid 1px black;padding:5px;min-height:500px;">
        <img style="height:600px;" />
    </div>
</body>
</html>

支持(0) 反对(0) happydaily | 园豆:648 (小虾三级) | 2015-10-23 16:13
0

好为难哦!

收获园豆:1
幻天芒 | 园豆:36544 (高人七级) | 2015-10-23 15:15

要是silverlight或wpf,这个问题一个*就解决了,css发展这么多年,我总感觉设计这个人的太垃圾了。

支持(0) 反对(0) 沧海一杰 | 园豆:48 (初学一级) | 2015-10-23 15:26

@沧海一杰: 是你的要求比较苛刻哦。

支持(0) 反对(0) 幻天芒 | 园豆:36544 (高人七级) | 2015-10-23 16:00
0
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>test</title>
        <style type="text/css">
            .main {
                position: absolute;
                height: auto;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                padding: 50px;
                background-color: #FF0000;
            }
            .imgArea {
                height: 100%;
                background-color: #00FF00;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <div class="imgArea">
            </div>
        </div>
    </body>
</html>
收获园豆:1
之奇一昂 | 园豆:1421 (小虾三级) | 2015-10-24 00:32
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册