將定義高度更改爲相對內容

Question

當窗口爲「屏幕」大小時，我有一個具有定義高度的div。它內部有一個div，內容以vert和horiz爲中心。在移動設備/平板電腦大小的情況下，我想刪除已定義的高度，並且希望div與其中的內容一樣大（僅限高度值）。

HTML - 引導& WordPress的框架

<article> 
<div class="article-L" style="..."> 

    <div class="Lg-cell-wrap"> 
    <h1><?php the_title(); ?></h1> 
    <?php the_content(); ?> 
    </div>    

</div><!--/bg-img-L --> 
</article> 

CSS

article { 
position: relative; 
margin-bottom: 10px; 
overflow: hidden; 
padding: 0; 
} 

.article-L { height: 570px; } 

.Lg-cell-wrap { 
position: relative; 
width: 85%; 
margin: 0 auto; 
top: 50%; 
transform: translateY(-50%); 
} 

我嘗試添加

@media screen and (max-width: 991px) { 

    .article-L { height: auto; } 
} 

，但它不工作

編輯

https://jsfiddle.net/4voLqj5a/6/

由於某種原因，我只能從創建一個小提琴得到的結果。我想在屏幕尺寸的設定高度，相對高度在較小的屏幕

Answer 1

這是height: auto;默認行爲：

https://css-tricks.com/almanac/properties/h/height/

（高度）會爲裏面的內容是一樣高，或者如果沒有內容，則爲零

這是我在運行代碼時看到的結果，它的行爲與預期相同。你沒有看到這個或你期望的是什麼？ transform設置在-50%是什麼拉內屏幕。如果您不想要，也可以在媒體查詢中重寫。

article { 
 
    position: relative; 
 
    margin-bottom: 10px; 
 
    overflow: hidden; 
 
    padding: 0; 
 
} 
 
.article-L { 
 
    height: 570px; 
 
    background: yellow; 
 
} 
 
.Lg-cell-wrap { 
 
    background: pink; 
 
    position: relative; 
 
    width: 85%; 
 
    margin: 0 auto; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
} 
 
@media screen and (max-width: 991px) { 
 
    .article-L { 
 
    height: auto; 
 
    } 
 
}

<article> 
 
    <div class="article-L"> 
 

 
    <div class="Lg-cell-wrap"> 
 
     <h1>The Content Title</h1> 
 
     <!-- the content --> 
 
     <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p> 
 
    </div> 
 

 
    </div> 
 
    <!--/bg-img-L --> 
 
</article>