Семантическое меню слева, занимающее слишком много места

Я пытаюсь создать структуру панели управления с помощью семантики-ui.Семантическое меню слева, занимающее слишком много места

У меня нет другого CSS, кроме семантического-ui, и я не загружаю Javascript (даже не из семантики-ui), так как я использую реакцию на управление жизненным циклом элементов.

Я пытаюсь иметь:

«О программе» страница, которая занимает оранжевую часть экрана, и более (вместо меню принимает оранжевую часть, а).
нижнего колонтитула, который прилипает к нижней

Здесь представлена структура страницы (реагируют данные удалены):

<link href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet"/> 
 
    <div class="app-wrapper" id="app"> 
 
     <div> 
 
      <div> 
 
      <div id="header"> 
 
       <div class="header page"> 
 
        <div class="container ui"> 
 
         <div href="#" class="floated icon menu right text ui">User</div> 
 
         <div class="menu text ui"> 
 
         <a href="geodb.io/home" class="icon item"><i class="emphasized github huge icon mark"></i></a> 
 
         <a class="item"> 
 
          <div class="input labeled small ui user"> 
 
           <div class="label ui">This project</div> 
 
           <input type="text" placeholder="search"> 
 
          </div> 
 
         </a> 
 
         <a href="#" class="item">Home</a> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div id="menu"> 
 
       <div class="menu pointing secondary ui vertical"> 
 
        <div><a href="/" class="item">index</a><a href="/faq" class="item">faq</a><a href="/about" class="item active">about</a></div> 
 
       </div> 
 
      </div> 
 
      <div class="container content main text ui"> 
 
       <div class="dividing header ui">about</div> 
 
       <div id="view"> 
 
        <div>About page</div> 
 
       </div> 
 
      </div> 
 
      <div id="footer"> 
 
       <div class="footer"> 
 
        <div class="divider section ui"></div> 
 
        <div class="container ui"> 
 
         <div class="disabled item">Copyright</div> 
 
         <i class="github icon large mark"></i> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
    </div>

источник

2016-02-02 nha

Не уверен, что если эта ссылка поможет вам, пытаясь воспроизвести код в местном вещь, но вот что я нашел. (https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/) –

редактировать Источники:

Хорошо, так что я сделал некоторые испытания и нашел это.

Я предполагаю, что ваш пример коды является прямым потомком <body> тега,

Моих изменений:

удалены два безклассовых, idless дивы обертки между вашей div.app-wrapper и div.header
добавили класс Сайт для приложения-обертки
добавленный класс .site-content to .container.content.main

Если вы оставите эти два на месте, нижний колонтитул не будет лежать внизу. Вот CSS для этого кода

.Site { 
     display: flex; 
     min-height: 100vh; 
     flex-direction: column; 
    } 

    .Site-content { 
     flex: 1; 
    } 

    #footer { 
     background-color: #333; 
     width: 100%; 
     bottom: 0; 
     position: relative; 
    }

Вот как это работает в моей локальной среде.

Обратная связь ценится

.Site { 
 
    display: flex; 
 
    min-height: 100vh; 
 
    flex-direction: column; 
 
} 
 
.Site-content { 
 
    flex: 1; 
 
} 
 
#footer { 
 
    background-color: #333; 
 
    width: 100%; 
 
    bottom: 0; 
 
    position: relative; 
 
}

<link href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet" /> 
 
<div class="app-wrapper Site" id="app"> 
 
    <div id="header"> 
 
    <div class="header page"> 
 
     <div class="container ui"> 
 
     <div href="#" class="floated icon menu right text ui">User</div> 
 
     <div class="menu text ui"> 
 
      <a href="geodb.io/home" class="icon item"><i 
 
           class="emphasized github huge icon mark"></i></a> 
 
      <a class="item"> 
 
      <div class="input labeled small ui user"> 
 
       <div class="label ui">This project</div> 
 
       <input type="text" placeholder="search"> 
 
      </div> 
 
      </a> 
 
      <a href="#" class="item">Home</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div id="menu"> 
 
    <div class="menu pointing secondary ui vertical"> 
 
     <div><a href="/" class="item">index</a><a href="/faq" class="item">faq</a><a href="/about" class="item active">about</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="container content main text ui Site-content"> 
 
    <div class="dividing header ui">about</div> 
 
    <div id="view"> 
 
     <div>About page</div> 
 
    </div> 
 
    </div> 
 
    <div id="footer"> 
 
    <div class="footer"> 
 
     <div class="divider section ui"></div> 
 
     <div class="container ui"> 
 
     <div class="disabled item">Copyright</div> 
 
     <i class="github icon large mark"></i> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

источник

2016-02-22 09:28:24

Спасибо, я попробую сегодня. Тем временем я могу посмотреть, если вы сделаете свой код исполняемым (https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/).+1 для источников также, он выглядит достаточно прост – nha

@nha Отредактировал мой вопрос, чтобы включить фрагмент. меня устраивает. (+1? Что это значит? Я бы предпочел, но предположения плохие) –

Спасибо :) Да, я поддержал вас – nha

Семантическое меню слева, занимающее слишком много места

ответ

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