調整大小時的收縮邊距

Question

當瀏覽器調整大小時，如何讓內容佔用邊距空間？

http://jsfiddle.net/denWG/62/

HTML：

<div class="jp-sleek jp-jplayer jp-audio"> 
    <div class="jp-gui"> 
    <div class="jp-controls jp-icon-controls"> 
     <div class="jp-progress"> 
     </div> 
    </div> 
    </div> 
</div> 

CSS：

.jp-jplayer { 
    min-width: 900px; 
} 

.jp-sleek .jp-gui { 
    height: 42px; 
    background-color: #e5e5e5; 
    position: relative; 
} 

.jp-sleek .jp-gui .jp-controls { 
    height: 100%; 
    position: relative; 
    margin: 0 auto; 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    width: 50%; 
} 

.jp-sleek .jp-gui .jp-icon-controls .jp-progress { 
    background-color: green; 
    height: 100%; 
    width: 600px; 
    min-width: 240px; 
    position: relative; 
} 

下面是它的那一刻：

我要上左，右頁邊距縮小和格力隨着屏幕尺寸變小，屏幕尺寸變得更大並佔用更多的餘量空間，直到100％。

Answer 1

您需要設置width: 100%;到.jp-jplayer和min-width: 450px到.jp-sleek .jp-gui .jp-controls：

.jp-jplayer { 
 
    width: 100%; 
 
} 
 

 
.jp-sleek .jp-gui { 
 
    height: 42px; 
 
    background-color: #e5e5e5; 
 
    position: relative; 
 
} 
 

 
.jp-sleek .jp-gui .jp-controls { 
 
    height: 100%; 
 
    position: relative; 
 
    margin: 0 auto; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    width: 50%; 
 
    min-width: 450px; 
 
} 
 

 
.jp-sleek .jp-gui .jp-icon-controls .jp-progress { 
 
    background-color: green; 
 
    height: 100%; 
 
    width: 600px; 
 
    min-width: 240px; 
 
    position: relative; 
 
}

<div class="jp-sleek jp-jplayer jp-audio"> 
 
    <div class="jp-gui"> 
 
    <div class="jp-controls jp-icon-controls"> 
 
     <div class="jp-progress"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>