1. дома
  2. Вопрос и ответ
  3. Основание на основе CSS

Основание на основе CSS

2015-03-04 2 views
0

О, золотые дни табличных макетов. Разве мы все не вернемся туда и не применим семантику? (Я знаю, знаю, ...)Основание на основе CSS

Но у меня сложный макет сайта, который выполняется за несколько секунд и очень мало строк кода, если я использую таблицу. Я тянул свои волосы за то, чтобы достичь того же самого с divs в течение двух дней. Может, кто-то может помочь.

Это расположение я хочу достичь: http://jsfiddle.net/reltek/13c6yfmh/

Это код с помощью таблиц, красиво и легко:

<table border="1" width="100%">  
    <tr> 
    <th rowspan="2" width="30%" valign="top">    
     <h2>Main Navigation</h2> 
     <p>Might get really long, sometimes even longer than the Main Content and Footer combined.</p> 
     <ul> 
     <li>Nav 1</li> 
     <li>Nav 2</li> 
     <li>Nav 3</li> 
     </ul> 
    </th> 
    <td valign="top"> 
     <h1>Main Content</h1> 
     <p>Flexible, might get really long.</p>   
    </td> 
    </tr> 
    <tr> 
    <td height="3em">  
     <h2>Footer</h2> 
     <p>flexible height, should stay at the bottom of the page.</h2> 
    </td> 
    </tr> 
</table>

Мой ДИВ на основе HTML можно найти здесь: http://jsfiddle.net/reltek/48rmshen/

Проблема заключается в следующем: нижний колонтитул справа не остается внизу, если левая колонка длиннее правой.

Любая помощь оценена, спасибо всем!

источник

2015-03-04 george

+1

Когда дело доходит до

S своего времени не только в прошлом. Если таблицы используют семантический смысл, их следует использовать. Например: если вы хотите отображать табличные данные (что обычно помещается в электронную таблицу), вы должны использовать таблицу. Итак, почитайте свои столы и используйте их надлежащим образом. – mpactMEDIA

ответ

1

В соответствии с дисплеем: таблицу в вашем примере следующие работы. Здесь находится jsfiddle http://jsfiddle.net/r4pg8p25/2/

Вы можете добавить и вычесть ваши пустые абзацы и посмотреть, как они расширяются и сжимаются с помощью левой панели.

Надеется, что это помогает, Тим

<html> 
    <header> 
     <style> 

      html, body { text-align: justify; height: 100%; } 

      .layout { display: table; height: 100%;} 
      .layout .columns-container { display: table-row; height: 100%;} 
      .layout .columns-container .column { display: table-cell; height: 100%;} 
      .layout .top { display: table-row; height: 100%;} 
      .layout .bottom { display: table-row; height: 100%;} 
      .layout .top .main{ display: table-cell; height: 100%;} 
      .layout .top .footer{ display: table-cell; height: 100%;} 

      .one-third { width:33%; float: left; height: 100%;} 
      .two-thirds { width:66%; height:100%; float: right; } 

      .main-footer { height: 100%; } 

      .nav { background: red; padding: 20px; } 
      .main { background: green; padding: 20px; height: 100%; } 
      .footer { background: brown; padding: 20px; height: 150px; } 

     </style> 
    </header> 
    <body> 
     <div class="layout"> 
      <div class="columns-container"> 
       <div class="column one-third"> 
        <div class='nav'> 
         <h2>Main Navigation</h2> 
         <p>Might get really long, sometimes even longer than the Main Content and Footer combined.</p> 
         padding-bottom:100%; margin-bottom:-100%; 
         <ul> 
          <li>Nav 1</li> 
          <li>Nav 2</li> 
          <li>Nav 3</li> 
         </ul> 
         <p>&nbsp;</p> 
         <p>&nbsp;</p> 
         <p>&nbsp;</p> 
         <p>&nbsp;</p> 
         <p>&nbsp;</p> 
         <p>&nbsp;</p> 
         <p>&nbsp;</p> 
         <p>&nbsp;</p> 
         <p>&nbsp;</p> 
         <p>&nbsp;</p> 
         <p>&nbsp;</p> 
         <p>&nbsp;</p> 
         <p>end</p> 
        </div> 
       </div> 
       <div class="column two-thirds"> 
        <div class="layout main-footer"> 
         <div class='top'> 
          <div class="main" role="main"> 
           <h1>Main Content</h1> 
           <p>Flexible, might get really long.</p> 
           <p>end of text</p> 
          </div> 
         </div> 

         <div class='bottom'> 
          <div class="footer"> 
           <section id="colophon" class="site-info" role="contentinfo"> 
            <h2>Footer</h2> 
            <p>flexible height, should stay at the bottom of the page.</p> 
           </section> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div>   
    </body> 
</html>

источник

2015-03-04 13:35:54 mpactMEDIA

+0

Спасибо Тиму, я возился с ним, и он работает точно так же, как и планировалось. Количество divs для достижения этого эффекта довольно велико. Таким образом, я поселился с гибким нижним колонтитулом, который приводит к менее загроможденной структуре документа. Не идеальное решение по-разному, но я думаю, я просто буду ждать лучшей поддержки flexbox. – george

+0

Не проблема, я бы сделал то же самое. На самом деле я увидел этот ответ @Quentin, прежде чем начал это. Я полагал, что всегда хорошо видеть несколько способов сделать то же самое, и я подумал, что вы бы очень хотели, чтобы это было так, как вы его начали. Имейте большой. – mpactMEDIA

+0

Возможно, вы захотите принять ответ как правильный (в зависимости от заданного вами вопроса). Ты позволил ему немного посидеть. Лучший. – mpactMEDIA

1

Вы можете использовать display:table, но, к сожалению, вы не можете сделать RowSpan так что вам нужно, чтобы получить немного творческим со структурой сНа:

html, body { 
 
    min-height:100%; 
 
    padding:0; 
 
    margin:0; 
 
} 
 
#wrapper { 
 
    position:absolute; 
 
    top:0; 
 
    bottom:0; 
 
    left:0; 
 
    right:0; 
 
} 
 
.table { 
 
    display:table; 
 
    width:100%; 
 
    height:100%; 
 
} 
 
.row { 
 
    display:table-row; 
 
} 
 
.cell { 
 
    display:table-cell; 
 
} 
 
#left-column { 
 
    width:30%; 
 
    background:red; 
 
} 
 
#right-column { 
 
    width:70%; 
 
    height:100%; 
 
} 
 
#content, #header { 
 
    height:100%; 
 
} 
 
#header { 
 
    background-color:green; 
 
} 
 
#footer { 
 
    background-color:blue; 
 
}
<div id="wrapper"> 
 
    <div class="table"> 
 
     <div class="row"> 
 
      <div id="left-column" class="cell"> 
 
       <h2>Main Navigation</h2> 
 

 
       <p>Might get really long, sometimes even longer than the Main Content and Footer combined.</p> 
 
       <ul> 
 
        <li>Nav 1</li> 
 
        <li>Nav 2</li> 
 
        <li>Nav 3</li> 
 
       </ul> 
 
      </div> 
 
      <div id="right-column" class="cell"> 
 
       <div id="content" class="table"> 
 
        <div id="header" class="row"> 
 
         <div class="cell"> 
 
          <h1>Main Content</h1> 
 

 
          <p>Flexible, might get really long.</p> 
 
         </div> 
 
        </div> 
 
        <div id="footer" class="row"> 
 
         <div class="cell"> 
 
          <h2>Footer</h2> 
 

 
          <p>flexible height, should stay at the bottom of the page.</p> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Example Fiddle

источник

2015-03-04 11:01:56 Pete

+0

Спасибо, Пит, это именно то, чего я хотел достичь! Я надеялся на более простую структуру документа, которая не просто имитирует структуру таблицы. Но, похоже, это путь. – george

+0

Вы можете использовать гибкую структуру (в зависимости от того, какие браузеры вам нужно поддерживать) в ответе Квентина и просто сделать ее растяжкой до 100% высоты. – Pete

+0

К сожалению, трафик веб-сайта будет довольно IE-тяжелым ... :-(100% высота не понадобится, поскольку рассматриваемая часть - это всего лишь часть всей страницы (добавление заголовка и т. Д.). – george

2

Этих это задание для flexbox (префикс и обходные пути для старых браузеров, оставленных как упражнение для чтения)

body { 
 
    display: flex; 
 
} 
 
nav { 
 
    background: red; 
 
} 
 
.non-nav { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
main { 
 
    background: green; 
 
    flex-grow: 1; 
 
} 
 
footer { 
 
    background: blue; 
 
    flex-shrink: 1; 
 
}
<nav> 
 
    <h2>Main Navigation</h2> 
 

 
    <p>Might get really long, sometimes even longer than the Main Content and Footer combined.</p> 
 
    <ul> 
 
     <li>Nav 1</li> 
 
     <li>Nav 2</li> 
 
     <li>Nav 3</li> 
 
    </ul> 
 
</nav> 
 
<div class="non-nav"> 
 
    <main> 
 
     <h1>Main Content</h1> 
 

 
     <p>Flexible, might get really long.</p> 
 
     <p>&nbsp;</p> 
 
     <p>&nbsp;</p> 
 
     <p>&nbsp;</p> 
 
     <p>&nbsp;</p> 
 
     <p>&nbsp;</p> 
 
     <p>&nbsp;</p> 
 
     <p>&nbsp;</p> 
 
     <p>&nbsp;</p> 
 
     <p>end of text</p> 
 
    </main> 
 
    <footer> 
 
     <h2>Footer</h2> 
 

 
     <p>flexible height, should stay at the bottom of the page.</p> 
 
     <ul> 
 
      <li>Nav 1</li> 
 
      <li>Nav 2</li> 
 
      <li>Nav 3</li> 
 
     </ul> 
 
    </footer> 
 
</div>

источник

2015-03-04 11:13:23 Quentin

+0

Спасибо за указание к flexbox я предпочитаю чистую структуру документа. Но отвратительная поддержка браузеров (практически без IE) заставляла меня уклоняться от этого варианта. Но, во-вторых, может возникнуть проблема с обходными решениями IE. – george

+0

Доля рынка IE <11 сокращается (спасибо в значительной степени, чтобы улучшить настройки по умолчанию для Центра обновления Windows). Большинство людей, не использующих его, либо находятся в ужасных корпоративных средах, либо застряли в Windows XP (которые даже не получают обновлений безопасности сейчас). Ваша забота о старом IE действительно зависит от того, кем является ваша целевая аудитория. – Quentin

+0

Это поражает гвоздь: это корпоративный/университетский/научный веб-сайт. IE9 и даже IE8 довольно распространены. – george

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

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