根據窗口大小調整div與內容一起調整大小

我擡頭看了一百萬個技巧，我無法得到這個工作，我知道還有其他類似的帖子。我很抱歉，如果它錯誤的人，但我需要我的代碼具體說明cuz我愚蠢。提前感謝你！我希望div容器contentContactBox以及其內部的所有div在調整瀏覽器窗口大小時按比例調整大小。 contentcontactBox的左側是一些文本，右側是谷歌地圖嵌入。我希望他們都按照窗口的大小按比例縮小。根據窗口大小調整div與內容一起調整大小

注：我知道我可能需要取出的位置是：絕對放在兒童的div

HTML：

<div id="contact" class="tab-pane fade in"> 
    <div id="contentBoxContact"> 
     <div id="map"></div> 
     <div id="contact-content"> 
     <h1>Come see us downtown<br> and have a beer!</h1><br> 
     <h2 style="text-decoration: underline">Phone Number:</h2> 
     <h2>555-555-5555</h2><br> 
     <h2 style="text-decoration: underline">Email:</h2> 
     <h2>[email protected]</h2><br> 
     <h2 style="text-decoration: underline">Address:</h2> 
     <h2> 
      Fake Place<br> 
      414 2nd Avenue<br> 
      Fake Location<br> 
     </h2> 
     </div> 
    </div> 
    </div> 
</div>

CSS：

body { 
    padding-top: 80px; 
    width: 100%; 
    height: 100%; 
    color: white; 
    background: url(/images/TaphouseTaps2.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 


.tab-content{ 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out; 
} 

#contentBoxContact { 
    margin-top: 54px; 
    width: 1185px; 
    height: 560px; 
    margin-left: -593px; 
    background: rgba(34,34,34,.75); 
} 

#contact-content { 
    position: absolute 
    margin-top: 8px; 
    margin-left: 40px; 
    line-height: 2px; 
    font-family: Titillium Web, Arial, Verdana, sans-serif; 
    color: white; 
} 

#map { 
    position: absolute; 
    width: 600px; 
    height: 500px; 
    margin-top: 30px; 
    margin-left: 550px; 
}

來源

2016-03-21 Edge

我忘了提我使用的引導。 – Edge

可以使用VW值，使該收縮的div與窗口成比例。

Example

HTML

<div class="one"></div> 
<div class="two"></div> 
<div class="three"></div>

CSS

.one { 
    width: 20vw; 
    height: 20vw; 
    background-color: #76ccde; 
    float: left; 
    margin-left: 10px; 
} 

.two { 
    width: 25vw; 
    height: 25vw; 
    background-color: #c976de; 
    float: left; 
    margin-left: 10px; 
} 

.three { 
    width: 30vw; 
    height: 30vw; 
    background-color: #a7de76; 
    float: left; 
    margin-left: 10px; 
}

來源

2016-03-21 01:50:17 Zakalwe

太棒了！你是我的英雄！我無法相信我無法在任何地方找到它。任何時候我都在搜索它，人們使用這些過於複雜的技術，我知道必須有一個更簡單的方法。 – Edge

有沒有辦法讓孩子div以相同的速度縮小，以便他們保持一個單位？ – Edge

要使用您的示例，如果要將較小的內部放置在較大的內部，則它們會與窗口大小成比例地縮小，但不會相互縮小，從而縮小窗口大小，使它們變得不合適。 – Edge

-1

我建議你看一看進入Bootstrap。它以動態而着稱;如果屏幕大小發生變化，則該頁面的整個CSS會發生變化。這是一個鏈接：Bootstrap 3。希望它能幫助:)

來源

2016-03-21 01:26:34

我正在使用bootstrap。 – Edge

我認爲u需要在孩子的div，而不是使用％PX和家長使用

height: auto; 
 
width:auto;

來源

2016-03-21 01:28:14

我正在使用px作爲孩子divs ...我會嘗試auto爲父母，但我不認爲它很簡單。 – Edge

另外，如果我使用自動作爲高度和寬度，那麼我如何設置div的寬度和高度。它的一個盒子裏藏着內容，所以我希望它是一定的大小。 – Edge

min-height：400 px; min-width：400px; –

根據窗口大小調整div與內容一起調整大小

回答

相關問題