foreach 循环后页脚不会显示答案

【问题标题】：footer wont shown after foreach loopsforeach 循环后页脚不会显示
【发布时间】：2015-10-01 12:44:27
【问题描述】：

我尝试制作一个带有页眉、ui-content 和页脚的简单 jquery 移动页面。我使用 jquery mobile 1.4.5 和 jquery 2.1.3。页眉和 ui-content div 运行良好，但页脚不显示。我认为这与<div class="ui-content"> 有关，因为当我删除这些时，页脚会显示给用户。是什么让<div class="ui-content"> 中的页脚不显示？

    <div data-role="page" id="main">
    <div data-role="header" data-theme="a">
        <h1>lenfr</h1>
    </div>
    <div class="ui-content">
        <?php
            include("list.php");
        ?>
        <div data-demo-html="true">
            <ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
                <?php foreach ($result as $key => $row): ?>
                <li id ="listone" name="listone"  data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-bar-b ui-li-has-count ui-first-child"><?php echo $row['date']; ?></li>
                    <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" >
                    <div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a class="ui-link-inherit"></a><p class="ui-li-aside ui-li-desc"><strong></strong><?php echo $row['time']; ?></p>
                        <p class="ui-li-desc"><strong><?php echo $row['title']; ?></strong></p>
                        <p class="ui-li-desc"><?php echo $row['text']; ?></p>

                        <p class="ui-li-desc"><strong><?php echo $row['town']; ?></strong></p> 
             <a class="commentbtn" data-rel="button" >comment</a>   
            <div style="width:25%" id="createcomment" class="comment" data-theme="a" >
    <form data-ajax="false" name="login-form" class="login-form" action="./comments.php" method="post" style="padding:20px 40px;">
        <div class="content">
        <div id="showcomments" data-theme="a" >
    <?php
include("showcomments.php");
?>
    <?php foreach ($comments as $keyComment => $rowComment): ?>
    <div>
    <p class="ui-li-desc"><strong><?php echo $rowComment['username']; ?></strong></p>
                        <p class="ui-li-desc"><?php echo $rowComment['comment']; ?></p>
                        </div>
                <?php endforeach; ?>
</div>
         <input type="hidden" name="id" id="id" value="<?php echo $row['id']; ?>" type="text" />
         <input type="hidden" name="autorpost" id="autorpost" value="<?php echo $row['autor']; ?>" type="text" />      
        </div>
        <div class="ui-grid-a">
        <div class="ui-block-a"><textarea rows="1" name="text" id="text" class="foo"></textarea></div>
         <div class="ui-block-b"><input type="submit" name="submit" data-icon="carat-r" value="comment" class="button" data-theme="a"/></div>       
        </div>  
    </form>
</div>

                    </li>

        <?php endforeach; ?>
                    <!-- foreach content -->
            </ul>
        </div>
    </div> <!-- end ui-content -->
</div> <!-- end page -->
</div> <!-- stray div tag -->
<div data-role="footer" data-id="footernav" data-tap-toggle="false" data-position="fixed" data-theme="a">
    <div data-role="navbar" data-theme="a">
        <ul>
            <li><a href="#own posts" data-icon="comment" data-transition="fade">own posts</a></li>
            <li><a href="#main" data-icon="bars" data-transition="fade" class="ui-btn-active">main</a></li>
            <li><a href="#create post" data-icon="plus" data-transition="fade">create post</a></li>
        </ul>
    </div>
    <!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -- this /div is also obsolete since page is closed above -->

【问题讨论】：

标签： jquery html css jquery-mobile

【解决方案1】：

检查您的代码后，我发现您在下面的 cmets 中指出了两个杂散的 div 标签：

<!-- main Seite -->
<div data-role="page" id="main">
    <div data-role="header" data-theme="a">
        <h1>lenfr</h1>
    </div>
    <div class="ui-content">
        <?php
            include("list.php");
        ?>
        <div data-demo-html="true">
            <ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
                <?php foreach ($result as $key => $row): ?>
                    <!-- foreach content -->
                <?php endforeach; ?>
            </ul>
        </div>
    </div> <!-- end ui-content -->
</div> <!-- end page -->
<!-- </div> --> <!-- stray div tag -->
<div data-role="footer" data-id="footernav" data-tap-toggle="false" data-position="fixed" data-theme="a">
    <div data-role="navbar" data-theme="a">
        <ul>
            <li><a href="#own posts" data-icon="comment" data-transition="fade">own posts</a></li>
            <li><a href="#main" data-icon="bars" data-transition="fade" class="ui-btn-active">main</a></li>
            <li><a href="#create post" data-icon="plus" data-transition="fade">create post</a></li>
        </ul>
    </div>
    <!-- /navbar -->
</div><!-- /footer -->
<!-- </div> --><!-- /page -- this /div is also obsolete since page is closed above -->

【讨论】：

嗨，我用你的代码试了一下，但它不起作用，还有其他想法吗？ :)
我对代码进行了一些编辑，因为我注释掉了杂散标签并添加了一个 endforeach（尽管您仍然应该填写 foreach 内容）。

【解决方案2】：

一个div 元素超出了它的<li>

<div data-role="page" id="main">

<div data-role="header" data-theme="a">
    <h1>lendt</h1>

  </div>


    <div class="ui-content">                 
<?php
include("list.php");
?>

    <div data-demo-html="true">
                <ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">

                <?php foreach ($result as $key => $row): ?>

                    <li id ="listone" name="listone"  data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-bar-b ui-li-has-count ui-first-child"><?php echo $row['date']; ?></li>
                    <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" >
                    <div class="ui-btn-inner ui-li"></div><div class="ui-btn-text"><a class="ui-link-inherit"></a><p class="ui-li-aside ui-li-desc"><strong></strong><?php echo $row['time']; ?></p>
                        <p class="ui-li-desc"><strong><?php echo $row['title']; ?></strong></p>
                        <p class="ui-li-desc"><?php echo $row['text']; ?></p>

                        <p class="ui-li-desc"><strong><?php echo $row['town']; ?></strong></p> 
             <a class="commentbtn" data-rel="button" >comment</a>   
            <div style="width:25%" id="createcomment" class="comment" data-theme="a" >
    <form data-ajax="false" name="login-form" class="login-form" action="./comments.php" method="post" style="padding:20px 40px;">
        <div class="content">
        <div id="showcomments" data-theme="a" >
    <?php
include("showcomments.php");
?>
    <?php foreach ($comments as $keyComment => $rowComment): ?>
    <div>
    <p class="ui-li-desc"><strong><?php echo $rowComment['username']; ?></strong></p>
                        <p class="ui-li-desc"><?php echo $rowComment['comment']; ?></p>
                        </div>
                <?php endforeach; ?>
</div>
         <input type="hidden" name="id" id="id" value="<?php echo $row['id']; ?>" type="text" />
         <input type="hidden" name="autorpost" id="autorpost" value="<?php echo $row['autor']; ?>" type="text" />      
        </div>
        <div class="ui-grid-a">
        <div class="ui-block-a"><textarea rows="1" name="text" id="text" class="foo"></textarea></div>
         <div class="ui-block-b"><input type="submit" name="submit" data-icon="carat-r" value="comment" class="button" data-theme="a"/></div>       
        </div>  
    </form>
</div>
</div>
                    </li>

        <?php endforeach; ?>



</ul>


</div>
</div>


    <div data-role="footer" data-id="footernav" data-tap-toggle="false" data-position="fixed" data-theme="a">
        <div data-role="navbar" data-theme="a">
            <ul>
                <li><a href="#own posts" data-icon="comment" data-transition="fade">own posts</a></li>              
                <li><a href="#main" data-icon="bars" data-transition="fade" class="ui-btn-active">main</a></li>
                <li><a href="#create post" data-icon="plus" data-transition="fade">create post</a></li>
            </ul>
        </div><!-- /navbar -->       
    </div><!-- /footer -->            
</div><!-- /page -->

【讨论】：