如何从顶部下拉div容器？

Question

I just want to pull down the table tag , so that the table should get fit in the page body. 我只想下拉table标记，以便该表适合页面主体。

You see, in the above image top portion of the table or container got hidden (ie, it's get overlapped with nav tag). 您会看到，在上面的图像中，表或容器的顶部被隐藏了（即，它与nav标签重叠了）。

index.html

<body id="page-top" class="index">
    <!-- Navigation -->
    <nav id="mainNav" class="navbar navbar-default navbar-fixed-top navbar-custom">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
                </button>
                <a class="navbar-brand" href="#page-top">Story Box</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class="hidden">
                        <a href="#page-top"></a>
                    </li>
                    <!-- <li class="page-scroll">
                        <a href="#portfolio">Portfolio</a>
                    </li>
                    <li class="page-scroll">
                        <a href="#about">About</a>
                    </li>
                    <li class="page-scroll">
                        <a href="#contact">Contact</a>
                    </li> -->
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

    <!-- Header -->

    <div class="container" tabindex="0" id="body-container">
        <div class="row col-lg-offset-5">
            <div class="form-group col-lg-12">
                <button class="btn btn-success btn-lg" href="#createModal" class="portfolio-link" data-toggle="modal">
                    <span class="glyphicon glyphicon-plus"></span>
                              Create
                </button>
            </div>
        </div>

        <table id="story-table" class="table table-striped table-bordered" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Image</th>
                    <th>Audio</th>
                    <th>Video</th>
                    <th>Description</th>
                    <th>Created At</th>
                </tr>
            </thead>

            <tbody>
              {% for story in stories %}
                <tr>
                    <td>{{ story.name }}</td>
                    <td>{{ story.image }}</td>
                    <td>{{ story.audio or 'N/A' }}</td>
                    <td>{{ story.video or 'N/A'}}</td>
                    <td>{{ story.description }}</td>
                    <td>{{ story.created_at }}</td>
                </tr>
              {% endfor %}
            </tbody>
        </table>
    </div>
    </body>

main.css

#body-container{
  margin-bottom: 120px;
  padding-top: 150px;
  max-height: 600px;
}

Answer 1

You can try something like this: 您可以尝试如下操作：

Logic: 逻辑：

Make your table as position: absolute . 将表格放置在position: absolute 。 This will allow you to move this table without affecting other elements. 这将使您可以移动此表而不会影响其他元素。
On click, toggle value of top . 单击时，切换top值。 Also since you need slide effect, you can use .animate . 另外，由于需要幻灯片效果，因此可以使用.animate 。

Note: for demo purpose, I have added a temp class visible and returning top value based on this. 注意：出于演示目的，我添加了一个visible的临时类，并基于此返回top值。 You can use any flag mechanism to achieve this 您可以使用任何标志机制来实现此目的

JSFiddle 的jsfiddle

 $(".navbar-toggle").on("click", function() { var top = getTopValue($("#story-table")); $("#story-table").animate({ top: top }, 400).toggleClass("visible") }) function getTopValue(el) { return (!el || el.hasClass("visible") ? "-100" : "100") + "px" } $("#story-table").css({ top: getTopValue() });

 #body-container { margin-bottom: 120px; padding-top: 150px; max-height: 600px; } #story-table { position: absolute; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <body id="page-top" class="index"> <!-- Navigation --> <nav id="mainNav" class="navbar navbar-default navbar-fixed-top navbar-custom"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header page-scroll"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i> </button> <a class="navbar-brand" href="#page-top">Story Box</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="hidden"> <a href="#page-top"></a> </li> <!-- <li class="page-scroll"> <a href="#portfolio">Portfolio</a> </li> <li class="page-scroll"> <a href="#about">About</a> </li> <li class="page-scroll"> <a href="#contact">Contact</a> </li> --> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> <!-- Header --> <div class="container" tabindex="0" id="body-container"> <div class="row col-lg-offset-5"> <div class="form-group col-lg-12"> <button class="btn btn-success btn-lg" href="#createModal" class="portfolio-link" data-toggle="modal"> <span class="glyphicon glyphicon-plus"></span> Create </button> </div> </div> <table id="story-table" class="table table-striped table-bordered" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Image</th> <th>Audio</th> <th>Video</th> <th>Description</th> <th>Created At</th> </tr> </thead> <tbody> {% for story in stories %} <tr> <td>{{ story.name }}</td> <td>{{ story.image }}</td> <td>{{ story.audio or 'N/A' }}</td> <td>{{ story.video or 'N/A'}}</td> <td>{{ story.description }}</td> <td>{{ story.created_at }}</td> </tr> {% endfor %} </tbody> </table> </div> </body>

如何从顶部下拉div容器？

问题描述

1 个解决方案

解决方案1
0 2017-03-15 08:47:45

Logic: 逻辑：

如何从顶部下拉div容器？

问题描述

1 个解决方案

解决方案1 0 2017-03-15 08:47:45

Logic: 逻辑：

解决方案1
0 2017-03-15 08:47:45