图像拉伸屏幕而不是适合div

时间：2015-03-06 16:59:09

标签： javascript jquery html css css3

我试图在不进行任何滚动的情况下制作适合单个屏幕的页面，但定义其格式的CSS并不起作用。

问题可以在JSFiddle

中看到

页脚固定在屏幕底部（应该是这样），但背景图像（在内容中）从标题下方延伸到页脚下方 。

在调整浏览器大小时，背景图片似乎也存在问题，但我确信在解决此问题时将会修复此问题。

我有以下代码：

HTML：index.html 

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/main.css">
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script>
        function diff(A, B) {
            return A.filter(function (a) {
                return B.indexOf(a) == -1;
            });
        }

        function show(shown) {
            var all = ['home', 'about', 'projects', 'contact'];
            var hide_these = diff(all, shown);
            var hidden;
            document.getElementById(shown).style.display='block';
            for(hidden in hide_these)
                document.getElementById(hide_these[hidden]).style.display='none';
            $(".sidebar").slideToggle(600);
            return false;
        }
        </script>
    </head>
    <body>
        <div id="home">
            <div class="header">
                <div class="menu-btn"></div>
                <h1>
                    Home
                </h1>
            </div>
            <div class="sidebar">
                <li><a href="#" onclick="return show('home');">Home</a></li>
                <li><a href="#" onclick="return show('about');">About</a></li>
                <li><a href="#" onclick="return show('projects');">Projects</a></li>
                <li><a href="#" onclick="return show('contact');">Contact</a></li>
            </div>
            <div class="content">
                <h1>Hello from Content!</h1>
            </div>
            <div class="footer">
               Hello from footer.
            </div>
        </div>

        <div id="about" style="display:none">
            <div class="header">
                <div class="menu-btn"></div>
                <h1>
                    About
                </h1>
            </div>
            <div class="sidebar">
                <li><a href="#" onclick="return show('home');">Home</a></li>
                <li><a href="#" onclick="return show('about');">About</a></li>
                <li><a href="#" onclick="return show('projects');">Projects</a></li>
                <li><a href="#" onclick="return show('contact');">Contact</a></li>
            </div>
            <div class="content">                    
                <h1>Hello from Content!</h1>
            </div>
            <div class="footer">
               Hello from footer.
            </div>
        </div>

        <div id="projects" style="display:none">
            <div class="header">
                <div class="menu-btn"></div>
                <h1>
                    Projects
                </h1>
            </div>
            <div class="sidebar">
                <li><a href="#" onclick="return show('home');">Home</a></li>
                <li><a href="#" onclick="return show('about');">About</a></li>
                <li><a href="#" onclick="return show('projects');">Projects</a></li>
                <li><a href="#" onclick="return show('contact');">Contact</a></li>
            </div>
            <div class="content">
                <h1>Hello from Content!</h1>
            </div>
            <div class="footer">
               Hello from footer.
            </div>
        </div>

        <div id="contact" style="display:none">
            <div class="header">
                <div class="menu-btn"></div>
                <h1>
                    Contact
                </h1>
            </div>
            <div class="sidebar">
                <li><a href="#" onclick="return show('home');">Home</a></li>
                <li><a href="#" onclick="return show('about');">About</a></li>
                <li><a href="#" onclick="return show('projects');">Projects</a></li>
                <li><a href="#" onclick="return show('contact');">Contact</a></li>
            </div>
            <div class="content">                
                <h1>Hello from Content!</h1>
            </div>
            <div class="footer">
               Hello from footer.
            </div>
        </div>

        <script>
            $(function() {
                $('body').addClass('loaded');
            });

            $(".menu-btn").on("click", function(){
                $(".sidebar").slideToggle(600);
            });

            $(".header h1").delay(500).animate({"opacity": "1"}, 700);
        </script>
    </body>
</html>

CSS：main.css 

    html,body {
        padding: 0;
        margin: 0;
        font-family: arial;
    }

    html, body, #home{
        width: 100%;
        height:100%;
    }
    a { 
        color: black;
    }

    a:visited { 
        text-decoration: none; 
        color: black; 
    }


    #home{
        min-height:100%;
        position:absolute;
    }

    #about, #projects, #contact{
        width: 100%;
        height:100%;
    }

    body .sidebar {
        display:block;
    }

    body.loaded .sidebar {
        display:none;
    }

    .header {
        background-color: black;
        height: 80px;
        width: 100%;
        font-family: cursive;
        text-align: center;
        color: white;
        display:flex; 
        align-items: center; 
        z-index: 1;
        position:relative;
    }

    .menu-btn {
        background-image: url("../images/menu.png");
        height: 48px;
        width: 44px;
        margin-left:50px;
    }


    .header h1 {
        opacity: 0;
        width:100%;
        margin:0;
        padding:0;
    }

    .sidebar {
        position: absolute;
        width: 200px;
        top: 80px;
        bottom: 0;
        padding-top: 10px;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";       /* IE 8 */
        filter: alpha(opacity=50);  /* IE 5-7 */
        -moz-opacity: 0.5;          /* Netscape */
        -khtml-opacity: 0.5;        /* Safari 1.x */
        opacity: 0.5;               /* Good browsers */
    }

    .sidebar li {
        color: black;
        list-style-type: none;
        margin-top: 10px;
        width: 100%;

    }

    .sidebar li a {
        text-decoration: none;
        margin-left: 30px;
        background-color: #9da1a4;
        width: 100px; 
        padding: 8px;
        border: 1px solid silver; 
        border-radius: 5px; 
        display: block;
    }

    .sidebar li a:hover {
        background-color: #ebebeb;
    }

    .content {
        top: -80px; /* Header height */
        bottom: 30px;
        background-image:url("../images/arbor.jpeg");
        background-size: cover;
        min-height: 100%;
        min-width: 100%;
        padding-top: 80px;
        padding-bottom: 10px;
        text-align: center;
    }

    .content p {
        padding-top: -10px;
        text-align: center;
        color: black;
    }

    .footer {
        width:100%;
        height:30px;
        text-align: center;
        color: white;
        background-color: black;
        padding-top: 10px;
        bottom:0;
        left:0;
        position: absolute;
    }

    .footer a img {
        position: relative;
        top: -5px;
    }

我尝试解决的问题是将.content区域设置为height = [30px，-80px]（即，从页脚顶部到标题的底部）。

我是CSS的新手，所以我确定格式很差，所以请提前抱歉。

谢谢大家， erip

4 个答案:

答案 0 :(得分：1)

如果您想在一个页面上显示所有内容而不进行任何滚动，请将position:fixed提供给正文。您可以在此处查看结果http://jsfiddle.net/mcnn1d81/1/。

答案 1 :(得分：0)

用这个更新你的css。

       html,body {
            padding: 0;
            margin: 0;
            font-family: arial;
            height:100%;
            width:100%;
            overflow:hidden;
        }

        .content {
            top: -80px; /* Header height */
            bottom: 30px;
            background-image:url("http://i.imgur.com/3WWnZZj.jpg?1");
            background-size: 100%;
            min-height: 100%;
            min-width: 100%;
            padding-top: 80px;
            padding-bottom: 10px;
            text-align: center;
            overflow:hidden;
        }

将解决您的问题

你可以保持背景大小：封面; for .content class。它是设置背景图像的最佳选择。

答案 2 :(得分：0)

因此，如果我理解正确，您希望页脚排列内容的底部，同时确保填充浏览器，无论大小。这对于＆＃34;亲戚＆＃34;定位！目前您的页脚设置为＆＃34;绝对＆＃34;，这就是它与您的背景重叠的原因。

这里是RELATIVE变更的更新小提琴：https://jsfiddle.net/mcnn1d81/13/ 

 .footer {
         width:100%;
         height:30px;
         text-align: center;
         color: white;
         background-color: black;
         padding-top: 10px;
         bottom:0;
         left:0;
         position: RELATIVE;
    }
.content {
        top: 0px; /* Header height */
        bottom: 30px;
        background-image:url("http://i.imgur.com/3WWnZZj.jpg?1");
        background-size: cover;
        min-height: 100%;
        min-width: 100%;
        padding-top: 80px;
        padding-bottom: 10px;
        text-align: center;
        position:RELATIVE;
    }

我希望有所帮助！

编辑：添加了代码以保留屏幕中的内容。 https://jsfiddle.net/mcnn1d81/20/ 这是一个快速，粗略的编辑，并意识到所写的内容只会遵循您放入其中的内容。一旦你告诉内容它需要多大，你就会导致一些不稳定的事情发生。 如果你想要动态内容（拉伸和适合屏幕），你必须在调整大小函数中添加一些代码，以确保CSS中的所有内容保持不变。我添加了更多，但我还有其他需要去做的事情。我希望这会把你推向正确的方向！

答案 3 :(得分：0)

试试这个：

body
{
   margin:0%;
   overflow:hidden;
}
相关问题
最新问题