Ответственный 3 * 3 квадратный квадрат div без полос прокрутки

Я хочу иметь гибкую сетку 9x9 div без полосы прокрутки. Сетка div должна изменяться в соответствии с видимым окном браузера. Я объединил "How to maintain the aspect ratio of a div using only CSS" с "Grid of responsive squares":Ответственный 3 * 3 квадратный квадрат div без полос прокрутки

HTML

<div class="stretchy-wrapper"> 
    <div class="inner"> 
     <div class="square"> 
      <div class="content"> 
       <div class="table"> 
        <div class="table-cell numbers"> 
         98% 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="square"> 
      <div class="content"> 
       <div class="table"> 
        <div class="table-cell numbers">    
         3.9/5 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="square"> 
      <div class="content"> 
       <div class="table"> 
        <div class="table-cell numbers">    
         3.9/5 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="square"> 
      <div class="content"> 
       <div class="table"> 
        <div class="table-cell numbers">    
         3.9/5 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="square"> 
      <div class="content"> 
       <div class="table"> 
        <div class="table-cell numbers">    
         3.9/5 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="square"> 
      <div class="content"> 
       <div class="table"> 
        <div class="table-cell numbers">    
         3.9/5 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="square"> 
      <div class="content"> 
       <div class="table"> 
        <div class="table-cell numbers">    
         3.9/5 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="square"> 
      <div class="content"> 
       <div class="table"> 
        <div class="table-cell numbers">    
         3.9/5 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="square"> 
      <div class="content"> 
       <div class="table"> 
        <div class="table-cell numbers">    
         3.9/5 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:400,900); /* <-- Just for the demo, Yes I like pretty fonts... */ 

.square { 
    float:left; 
    position: relative; 
    width: 30%; 
    padding-bottom : 30%; /* = width for a 1:1 aspect ratio */ 
    margin:1.66%; 
    background-color:#1E1E1E; 
    overflow:hidden; 
} 

.content { 
    position:absolute; 
    height:90%; /* = 100% - 2*5% padding */ 
    width:90%; /* = 100% - 2*5% padding */ 
    padding: 5%; 

} 
.table{ 
    display:table; 
    width:100%; 
    height:100%; 
} 

body { 
    font-size:20px; 
    font-family: 'Lato',verdana, sans-serif; 
    color: #fff; 
    text-align:center; 
    background:#ECECEC; 
} 

.numbers{ 
    font-weight:900; 
    font-size:100px; 
} 

div.stretchy-wrapper { 
    width: 100%; 
    padding-bottom: 56.25%; /* 16:9 */ 
    position: relative; 

    background: lightgrey; 
} 

div.stretchy-wrapper > .inner { 
    position: absolute; 
    top: 0; bottom: 0; left: 0; right: 0; 

    color: white; 
    font-size: 24px; 
    text-align: center; 
}

Однако дивы до сих пор получить расширена до максимальной ширины, которая вызывает полосы прокрутки: Fiddle.

Что такое трюк css, который делится только на максимальную видимую ширину или высоту? Значит, у меня нет полос прокрутки?

источник

2015-08-09 mles

... только идея: Вы можете использовать «VH»/«фольксваген» в качестве размера блока и «известково», а в CSS, вы думали о том, что тоже? –

Я читал о «vh/vw», но не знал о «calc». Спасибо за предложение, я посмотрю. – mles

И я предлагаю посмотреть на css display flexbox ... звучит как типичный случай, чтобы использовать его ... –

решаемые его с Flexbox и Vmin

CSS

.container { 
     margin: 0 auto; 
     display: flex; 
     flex-direction: row; 
     flex-wrap: wrap; 
     justify-content: space-around; 
     align-items: center; 
     align-content: space-around; 

     height: 93vmin; 
     width: 93vmin; 
     background: lightgrey; 
    } 
    .cell { 
     height: 30vmin; 
     width: 30vmin; 
     background-color:#1E1E1E; 
    }

HTML

<div class="container"> 
    <div class="cell"></div> 
    <div class="cell"></div> 
    <div class="cell"></div> 

    <div class="cell"></div> 
    <div class="cell"></div> 
    <div class="cell"></div> 

    <div class="cell"></div> 
    <div class="cell"></div> 
    <div class="cell"></div> 
</div>

Full Screen Fiddle

Fiddle

Ответственный 3 * 3 квадратный квадрат div без полос прокрутки

ответ

Смежные вопросы