Question

您好，我有下一个问题，如果内容超过窗口高度，我的页面要高度拉伸，否则只是全屏。但现在它看起来像这样：

enter image description here

这是我的HTML：

<!DOCTYPE html>
<html>
<head>
    <meta content="width=1100" name="viewport">
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <script src="js/jquery-1.11.0.min.js"></script>
    <link type="text/css" rel="stylesheet" href="css/style.css">
<script>
    var previousPage;
    $(document).ready( function() {
         SwitchPage("home");
         FixNavigation();
        $("#home").on("click", function() {
            SwitchPage("home")
        });
        $("#info").on("click", function() {
            SwitchPage("info")
        });
        $("#prices").on("click", function() {
            SwitchPage("prices")
        });
        $("#schedule").on("click", function() {
            SwitchPage("schedule")
        });
        $("#kontacts").on("click", function() {
            SwitchPage("kontacts")
        });
        $("#education").on("click", function() {
            SwitchPage("education")
        });
    });
    function SwitchPage(name) {
        if (previousPage!=name)
        {
            $('#'+name).addClass('active');
            if(previousPage!=null){
                $('#'+previousPage).removeClass('active');
            }
            previousPage=name;
            $("#content-inner").load("pages/"+name+".html");
        }
    }
    function FixNavigation() {

    }
</script>
</head>
<body>
    <div>
        <div class="header">
            <div class="header-inner">
            </div>
        </div>
        <div class="tabs">
            <div class="tabs-inner">
                <ul>
                    <li><a id="home">Sākums</a></li>
                    <li><a id="info">Informācija</a></li>
                    <li><a id="prices">Pakalpojumi un cenas</a></li>
                    <li><a id="schedule">Darba laiks</a></li>
                    <li><a id="kontacts">Kontakti</a></li>
                    <li><a id="education">Izglītība</a></li>
                </ul>
            </div>
        </div>
        <div class="content">
            <div class="content-inner" id="content-inner">
            </div>
        </div>
        <div class="footer">
            <div class="footer-inner">
            </div>
        </div>
    </div>
</body>

这是我的CSS：

body{
min-width: 960px;
min-height: 100%;
margin: 0;
padding: 0 0 1px;
position: relative;
display: block;
background: #ff8b10 url(images/main_background.jpg) no-repeat;
font: normal normal 18px Georgia, Utopia, 'Palatino Linotype', Palatino, serif;
color: #000000;
}

.header{
margin-top: 30px;
height: 300px;
}

.header-inner{

height: 300px;
width: 960px;
    margin: 0 auto;
}

.tabs{
margin-top: 30px;
}

.tabs-inner{
width: 900px;
    margin: 0 auto;
}

ul {
width: 100%;
background: transparent none no-repeat scroll left;
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;
line-height: 1.2;
display: table;
table-layout: fixed;
}

li{
border: none;
margin: 0;
padding: 0;
float: left;
text-indent: 0;
display: table-cell;
width: auto;
text-align: center;
}

a{
background-image: url('images/pixel.png');
display: inline-block;
padding: .25em 1em;
font: normal normal 20px Georgia, Utopia, 'Palatino Linotype', Palatino, serif;
border-right: 1px solid transparent;
color: #000000;
text-decoration: none;
}

a:hover {
background-color: #ffb267;
color: #660000;
cursor: pointer;
}

.active{
background-color: #ffd7ae;
color: #660000;
}

.content{
margin-top: 30px;
}

.content-inner{
width: 880px;
    margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

.footer{
margin-top: 30px;
color: #ff8b10;
height: 100px;
background: #000000 url(images/footer.png) repeat scroll top left;
 }

.footer-inner{

}

.home_content{
    background: transparent url(images/content.png) repeat scroll top left;
}

Answer 1

height: 100%和html都需要body。这是一个类似的问题：Make full page white。

使页面变得完整

1 个答案: