Question

我有一个带标签的div，每个标签显示不同的内容。这些选项卡中的一个具有比屏幕大的表格，一旦我打开它，div从窗口上方伸出并从顶部溢出。我在父div上有overflow:auto，并且div可以正确拉伸，但子div的一部分仍然从顶部溢出。加载时，子div是一个小框，位于屏幕中央，高度取决于内容。

我使用引导程序来帮助。

.parent
{
    background-image: url("images/CM3A2078.jpg");
    background-position: 20%;
    background-size: cover;
    display: flex;
    flex-direction: column;
    padding: 0;
    position: relative;
    overflow: auto;
}

.child
{
    position: absolute;
    min-height: 250px;
    background-color: rgba(255,255,255,0.6);
    border-style: solid;
    border-color: #FF6400;
    border-radius: 25px;
    transform: translate(0, -50%);
    padding: 20px;
    margin-left: 25px;
    margin-right: 25px;
    top: 50%;
    width: calc(100% - 50px);
    min-width: calc(100% - 50px);
}
.h-full
{
    min-height: 100vh;
}

<body>
<div class="container-fluid h-100">
    <div class="row h-full">
        <div class="col-lg-2 col-md-2 col-sm-1 col-1 side h-full">
            <div class="purple-gradient-left"></div>
        </div>
        <div class="col h-full parent">
            <div class="child">
                <div>
                    Some content
                </div>
                <div>
                    <br>
                    <div class="row">
                        <div class="col-2">
                            <button type="button" class="btn btn-primary btn-lg btn-disconnect">Deconnecter</button>
                        </div>
                        <div class="col">
                            <ul class="nav nav-tabs tab-display justify-content-end" role="tablist">
                                <li class="nav-item ">
                                    <a class="nav-link active" data-toggle="tab" href="#home">Administration</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" href="#menu1">Reservation</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" href="#menu2">Annulation</a>
                                </li>
                            </ul>
                        </div>

                    </div>
                    <div class="tab-content">
                        <div id="home" class="container tab-pane active"><br>
                            <h3>HOME</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                                incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                        <div id="menu1" class="container tab-pane fade"><br>
                            <h3>Reservation</h3>
                            <?php include 'traitement.php'; ReservationTable(); ?>
                        </div>
                        <div id="menu2" class="container tab-pane fade"><br>
                            <h3>Menu 2</h3>
                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                                laudantium, totam rem aperiam.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-1 col-1 side h-full">
            <div class="purple-gradient-right"></div>
        </div>
    </div>
</div>
</body>

有一张图片显示发生了什么。

Answer 1

在您的CSS文件中添加以下样式。

* {
       box-sizing: border-box;
  }
.child 
  {
        max-height: 100%;
  }

Answer 2

我终于通过在子div中将position:absolute更改为position:sticky解决了我的问题。

Answer 3

.parent样式中添加以下内容：

height: 100%;

并添加身体样式：

body{
    margin:0;
}

div在窗口顶部溢出

3 个答案: