当侧divs消失时，最佳方法可以使中间div大小？

发布于 2025-02-09 21:44:24 字数 1777 浏览 1 评论 0原文

每当我应用显示：无；到任何侧面。

当前，它适用于左右DIVS，但底部不起作用。当我添加显示：底部的画布上没有任何内容都不会调整到页面的其余部分。

关于如何使底部也起作用的任何想法？

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

.ribbon {
    background: beige;
    height: 10vh;
}

.outer-col {
    display: flex;
    flex-direction: column;
}

.inner-col {
    display: flex;
    flex-direction: row;
    flex: 1 1 0;
}

.inner-row {
    flex: 6;
}

.canvas {
    background: skyblue;
    min-height: 70vh;
}

.left {
    /* display: none; */
    background: beige;
    flex: 1;
}

.right {
    /* display: none; */
    background: beige;
    flex: 1;
}

.bottom {
    /* display: none; */
    background: beige;
    height: 20vh;
}

.ribbon, .bottom, .canvas, .ribbon, .left, .right {
    border-style: solid;
}

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
    <script src="./script.js"></script>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="ribbon"></div>
    <div class="outer-col">
        <div class="inner-col">
            <div class="left"></div>
            <div class="inner-row">
                <div class="canvas"></div>
                <div class="bottom"></div>
            </div>
            <div class="right"></div>
        </div>
    </div>
    
</body>
</html>

原文

I'm trying to use flexbox to resize my middle div ("canvas") whenever I apply display: none; to any of the side divs.

Currently, it works for both the right and left divs but the bottom one doesn't work. When I add display:none to the bottom canvas doesn't resize to the rest of page.

Any ideas on how to make the bottom one work as well?

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

.ribbon {
    background: beige;
    height: 10vh;
}

.outer-col {
    display: flex;
    flex-direction: column;
}

.inner-col {
    display: flex;
    flex-direction: row;
    flex: 1 1 0;
}

.inner-row {
    flex: 6;
}

.canvas {
    background: skyblue;
    min-height: 70vh;
}

.left {
    /* display: none; */
    background: beige;
    flex: 1;
}

.right {
    /* display: none; */
    background: beige;
    flex: 1;
}

.bottom {
    /* display: none; */
    background: beige;
    height: 20vh;
}

.ribbon, .bottom, .canvas, .ribbon, .left, .right {
    border-style: solid;
}

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
    <script src="./script.js"></script>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="ribbon"></div>
    <div class="outer-col">
        <div class="inner-col">
            <div class="left"></div>
            <div class="inner-row">
                <div class="canvas"></div>
                <div class="bottom"></div>
            </div>
            <div class="right"></div>
        </div>
    </div>
    
</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

野の 2025-02-16 21:44:24

那是因为没有足够的内容来填充整个屏幕视口高调。

您可以应用最小值：100VH在html和/或body上，然后应用高度：100％在两个上。

vh - 单位代表视口高，其价值为百分比（以其独特的方式）。 100VH是视口屏幕的100％，50VH为50％，依此类推。

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100vh;
}

body {
    display: flex;
    flex-direction: column;
}

.ribbon {
    background: beige;
    height: 10vh;
}

.outer-col {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.inner-col {
    display: flex;
    flex-direction: row;
    flex: 1 1 0;
    height: 100%;
}

.inner-row {
    flex: 6;
}

.canvas {
    background: skyblue;
    min-height: 70vh;
    height: 100%;
}

.left {
    /* display: none; */
    background: beige;
    flex: 1;
}

.right {
    /* display: none; */
    background: beige;
    flex: 1;
}

.bottom {
    display: none;
    background: beige;
    height: 20vh;
}

.ribbon, .bottom, .canvas, .ribbon, .left, .right {
    border-style: solid;
}

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
    <script src="./script.js"></script>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="ribbon"></div>
    <div class="outer-col">
        <div class="inner-col">
            <div class="left"></div>
            <div class="inner-row">
                <div class="canvas"></div>
                <div class="bottom"></div>
            </div>
            <div class="right"></div>
        </div>
    </div>
    
</body>
</html>

That's because there's not enough content to fill up the entire screens viewport-height.

You can apply min-height: 100vh on html and/or body, and then apply height: 100% on both .outer-col and .inner-col to let them take the remaining space that is set with 100vh.

The vh-unit stands for viewport height and its value is in percentages (in its own unique way). 100vh is 100% of the viewport screen, 50vh is 50% and so on.

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100vh;
}

body {
    display: flex;
    flex-direction: column;
}

.ribbon {
    background: beige;
    height: 10vh;
}

.outer-col {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.inner-col {
    display: flex;
    flex-direction: row;
    flex: 1 1 0;
    height: 100%;
}

.inner-row {
    flex: 6;
}

.canvas {
    background: skyblue;
    min-height: 70vh;
    height: 100%;
}

.left {
    /* display: none; */
    background: beige;
    flex: 1;
}

.right {
    /* display: none; */
    background: beige;
    flex: 1;
}

.bottom {
    display: none;
    background: beige;
    height: 20vh;
}

.ribbon, .bottom, .canvas, .ribbon, .left, .right {
    border-style: solid;
}

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
    <script src="./script.js"></script>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="ribbon"></div>
    <div class="outer-col">
        <div class="inner-col">
            <div class="left"></div>
            <div class="inner-row">
                <div class="canvas"></div>
                <div class="bottom"></div>
            </div>
            <div class="right"></div>
        </div>
    </div>
    
</body>
</html>

回复收藏 0 原文

~没有更多了~