55572


掲題の通りHTMLを一切編集せず、JSも使わずdisplay: noneがされた要素の部分だけ大きさを保持しておきたいです。

min-width-heightで可能かと思いましたがやぱり消えてしまいました。  
どうすればうまくいくでしょうか。

[code]

    div {
        min-width: 500px;
        min-height: 500px;
        background-color: red;
        display: none;
    }
    
[/code]

よろしくお願いします。


CC BY-SA 4.0
2019-06-06T02:55:01.270
55568
2019-06-29T00:06:21.417
34604
question
html css
CSSだけでdisplay: noneをかけた要素の大きさを保持したい


`display: none`
では不可能です。CSSのボックスツリーから外れるため、他のプロパティもいっさい効力がなくなります。親のボックスで大きさを確保するしかありません。

`visibility: hidden` や `opacity: 0` で消すのはいかがでしょうか。


CC BY-SA 4.0
2019-06-06T03:52:09.920
55570
2019-06-06T03:52:09.920
3475
55568
answer


端的に言えば、 **不可能** だと思います。

なぜならば、 `display` プロパティに none を指定した場合、 **ボックスは生成されない** からです。また、 `offsetWidth`,
`offsetHeight` 属性などは、要素に関連付けられた CSS レイアウトボックスがない場合に、 0
を返します[[1]](https://www.w3.org/TR/cssom-view-1/#dom-htmlelement-offsetwidth)。

> ## 9.2.4 The 'display'
> property[[2]](https://www.w3.org/TR/CSS22/visuren.html#propdef-display)
>
> This value causes an element to not appear in the formatting structure
> (i.e., in visual media the element generates no boxes and has no effect on
> layout). Descendant elements do not generate any boxes either; the element
> and its content are removed from the formatting structure entirely. This
> behavior cannot be overridden by setting the `display` property on the
> descendants.
>
> Please note that a display of 'none' does not create an invisible box; it
> creates no box at all. CSS includes mechanisms that enable an element to
> generate boxes in the formatting structure that affect formatting but are
> not visible themselves. Please consult the section on visibility for
> details.

要素によって生成されたボックスを不可視にした上で、レイアウトに影響を与えるためには、 `visibility` プロパティを用いることが出来ます。

> ## 11.2 Visibility: the 'visibility'
> property[[3]](https://www.w3.org/TR/CSS22/visufx.html#propdef-visibility)
>
> The `visibility` property specifies whether the boxes generated by an
> element are rendered. Invisible boxes still affect layout (set the `display`
> property to 'none' to suppress box generation altogether). Values have the
> following meanings:
>
>   * **hidden**  
>  The generated box is invisible (fully transparent, nothing is drawn), but
> still affects layout. Furthermore, descendants of the element will be
> visible if they have 'visibility: visible'.
>

[code]

    div {
      min-width: 500px;
      min-height: 500px;
      background-color: red;
      visibility: hidden;
    }
[/code]

[code]

    <div></div>
[/code]

* * *

参考:

  1. [CSSOM View Module](https://www.w3.org/TR/cssom-view-1/)
  2. [Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification](https://www.w3.org/TR/CSS22/)


CC BY-SA 4.0
2019-06-06T04:08:18.093
55572
2019-06-06T04:40:58.280
2019-06-06T04:40:58.280
32986
32986
55568
answer


他の方もご指摘のように、display:noneで要素の保持はできません。  
ご希望にそうなら、visibility:hidden です。  
両方とも要素を非表示にできますが、その違いは「非表示にする」か「要素自体をなくす」かの違いです。  
display:noneは要素自体をなくすので、大きさを保持すると言うことはできません。  
しかし、DOMからは消えないのでHTMLコード上では存在していることになります。


CC BY-SA 4.0
2019-06-29T00:06:21.417
56206
2019-06-29T00:06:21.417
34895
55568
answer