錨覆蓋整個DIV - 但有挑戰，沒有javascript

Question

我正在設計一個小挑戰，現在它越來越好。

從本質上講，它是一種材料設計卡，這意味着，當我點擊它，它需要我在別處。

簡單的路線是（並且現在是）用錨點包圍內容。但是，在這種情況下，我只希望錨文本是「我的關鍵字」。

下面是簡單的HTML輸出：

<a class="post-card md-card"> 
    <div class="md-card-title aspect-16x9"> 
     <div class="title-large"></div> 
    </div> 
    <div class="md-card-content"> 
     <div class="sup-text"></div> 
    </div> 
</a> 

因此，兩件事情我想要做的是：

• 只有關鍵字錨內
• 可以點擊整件事（該鏈接覆蓋整個外部的div）

這裏的東西，使它更diffic崇拜：

• 在頂部的藍色方塊的縱橫比的設定，這意味着它不是一個 恆定高度
• 藍盒子內的文本時使用的Flexbox的
• 中心的白盒是不是一個固定高度或者

這裏的縱橫比是如何計算的：

.AspectRatio(@widthRatio:16; @heightRatio:9; @useableWidth:100%) { 
    &:extend(.clearfix all); 

    overflow:hidden; 
    max-width:@useableWidth; 

    &::before { 
     content:""; 
     float:left; 
     padding-top:percentage(@heightRatio/@widthRatio); 
    } 
} 

所以我需要將關鍵字文本保留在原來的位置，但要使整個事物可點擊。

我一直在玩這個想法，一個絕對定位在頂部的錨，我可以做，但我不能讓它伸展到底部沒有移動文本。

任何CSS大師有一些想法？

Answer 1

這應該給你一個很好的起點......

.post-card { 
 
    background-color: #63d9ff; 
 
    box-sizing: border-box; 
 
    position: relative; 
 
    width: 200px; 
 
} 
 

 
.post-card * { 
 
    box-sizing: inherit; 
 
} 
 

 
.post-card .md-card-title { 
 
    bottom: 0; 
 
    left: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    text-align: center; 
 
    top: 0; 
 
} 
 

 
.post-card .md-card-title .content-prop, 
 
.post-card .md-card-title .content { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
.post-card .md-card-title .content-prop { 
 
    padding-top: 56%; 
 
    width: 0; 
 
} 
 

 
.post-card .md-card-title .content { 
 
    padding: 1rem; 
 
    width: 100%; 
 
} 
 

 
.post-card .space-prop { 
 
    display: block; 
 
    padding-top: 56%; 
 
} 
 

 
.md-card-content { 
 
    background-color: grey; 
 
    padding: 1rem; 
 
}

<div class="post-card md-card"> 
 
    <a class="md-card-title aspect-16x9" href="#"> 
 
     <span class="content-prop"></span><!-- 
 
     --><span class="content">My Keyword</span> 
 
    </a> 
 
    <span class="space-prop"></span> 
 
    <div class="md-card-content"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis mauris ut eros consectetur efficitur vitae at leo. 
 
    </div> 
 
</div>

JSFiddle

所以交代......

整個明信片相對於定位，然後將錨固定在其中。錨點的頂部，左側，底部和右側值爲0，這使得它覆蓋了它的父容器。

content-prop和space-prop沒有被給予高度，但是具有56％的頂部填充。這意味着它們的頂部填充值是它們寬度的56％，以16：9的比例出現。此處使用空間橫幅在明信片頂部添加一個空白間隙，以便爲錨點留出空間。

content-prop和內容元素都被設置爲顯示內嵌塊並垂直對齊到中間。由於道具比內容高，所以內容漂浮在中心。這兩個元素之間的HTML註釋消除了空白區域，因此即使當prop位於同一水平行時，content div也可以設置爲100％寬度。