CSS高度100%不起作用

时间:2013-12-01 23:53:16

标签: php css height

好吧我知道这已被问了一百万次,而且我已经看到了关于身体和html标签的百万个答案,它需要达到100%的高度才能起作用但是我无法让这个东西起作用。这就是问题所在:

我需要我的身体内侧和侧边栏内容向下延伸以满足另一个停止的地方。我需要这个用于wordpress的动态页面。所以这是标题。

的header.php

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
<?php wp_head(); ?>
!!!!content cut to save space!!!!!
</head>

<body <?php body_class(); ?>>

<div id="site">

    <div id="wrapper">

            <!------break-from-header------>

            <div id="wrapperbody">
                <div id="bodyinside">

index.php页面和post.php页面包含内容的任何内容都在上方和下方调用标题。自我解释权?

footer.php

                </div><!--body-inside-->
<div id="sidebar">

<?php get_sidebar(); ?>

<div id="sidebarlight">
</div>
</div>
            </div><!--wrapper-body-->
        </div><!--main-wrapper-->
    <div id="footer-wrapper">
        <div id="footer">

    <div id="footer-nav">

                <?php wp_nav_menu(array('theme_location' => 'footer-menu')); ?>

            </div><!--footer-nav-->

            <div id="copyright">

                <p>Powered by: <a href="http://wordpress.org">WordPress</a> Copyright 2013</p>

            </div><!--copyright-->

        </div><!--footer-->

    </div><!--footer-wrapper-->
</div>
</body>
</html>

最后是css

/******************************Basic CSS**************************************/
html,
body {
    background-image:url('http://patriotvoice.net/wp-content/uploads/2013/11/bg.jpg');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center; 
    color: #000;
    font-family: 12pt/12pt 'Source Sans Pro', sans-serif;
    height:100%
    line-height: 100%;
    margin: 0px auto;
    padding: 0px;
    }
/*********************************Wrappers********************************/
#site {
    float: left;
    width: 100%;
    height: 100%
}
#wrapper {
    height: 100%;
}
/*****************Main Body******************/
#wrapperbody {
    display: block;
    background: #ffffff;
    padding-top: 70px;
    width: 1100px;
    height: 100%;
    margin: auto;
}
#bodyinside {
    display: inline;
    background: #fff;
    width:740px;
    height: 100%;
    float:left
}
/**************Sidebar******************/
#sidebar-wrapper {
    display: inline;
    background: #2E2E2E;
    float: left;
    position: relative;
    width: 340px;
    height: 100%;
}

我拿出了很多代码但这是基本的东西。就像我说的,我需要侧边栏和车身内部相互对齐。你可以看到内容延伸到侧边栏的位置,我需要灰色向下延伸以在这里与白色相遇http://patriotvoice.net .....但我需要将白色延伸到像这样的页面上的灰色http://patriotvoice.net/news

2 个答案:

答案 0 :(得分:0)

我认为你应该对所有换行和内容使用min-height:100%;,因为你给了body和html标签height:100%; //对不起,可能我没有很好地解读你的问题,我正在努力学习英语,但没有显着的成绩

答案 1 :(得分:0)

首先,给定的网站看起来很奇怪,因为位置:固定在nav-main-wrapper上。由于这个原因,您的内容正在向上推进。

为了更好的编码实践,有一个header.php,content.php(带循环),sidebar.php,footer.php来调用索引。

根据你放入的内容,你的身高应该可以正常工作。

发布一个示例,看看它的内容如何为我提供更多内容,以便更好地了解高度:100%不起作用,以便我可以进一步为您提供帮助。