时间戳

首页 > 解决方案 > Make an HTML element invisible and not take up space in layout

html - Make an HTML element invisible and not take up space in layout

问题描述

I have this:

 <div class="pane">
    <!-- other elements -->
        <textarea class="editor invisible">Start Writing here</textarea>
        <div class="v-container visible default background-image">
 </div>

The CSS:

.editor {
    margin: 0;
    overflow: auto;
    outline: none;
    resize: none;
    border: none;
    position: relative;
    top: 0;
    right:0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.007);
    padding: 8px 8px 8px 8px;
    width: 100%;
    height: 100%;
}

.editor::selection {
    background-color: rgba(0, 0, 0, 0.164);
}

.default {
    background-color: rgba(0, 0, 0, 0.103);
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.background-image {
    background-image: url('../graphics/Note.png');
    background-position: center;
    background-repeat: no-repeat;
}

I want it that when the textarea is visible, the other child element in pane would be invisible and not take up layout space at all. I tried using visibility: hidden and visibility: visible but when the textarea is invisible there is still a blank space on the window.

标签： htmlcss

解决方案

您应该使用 display:none 来防止它占用空间。

display: none

推荐阅读