Отзывчивая панель поиска ширины 100%, которая учитывает другие элементы навигации.

Question

Я пытаюсь создать навигационную панель, похожую на youtube, где есть два divs, каждый из которых плавает на противоположных сторонах экрана. В середине я пытаюсь создать поисковую панель, которая расширяется, чтобы заполнить оставшееся пространство. Когда пользователь изменяет размер своего браузера, ширина поисковой системы должна сокращаться, чтобы обеспечить гибкий макет. Я не могу для жизни понять, как это сделать. Всякий раз, когда я могу заставить поисковую панель реагировать, это приводит к тому, что правый плавающий div поджимается под ним, и не начнет рушиться сам по себе, пока не достигнет самого края экрана. Я хочу, чтобы он начал рушиться, как только он попал в правый плавающий div.

Вот HTML:

<header> 

    <nav id="page-nav-left" role="navigation"> </nav> 

    <form id="searchBar-form"> 
     <input type="text" id="searchBar" placeholder="Search..."> 
    </form> 

    <nav id="page-nav-right" role="navigation"> </nav> 

</header> 

CSS-все в этой скрипкой: http://jsfiddle.net/L9qvpL32/

Answer 1

Возможно, что-то вроде этого? http://jsfiddle.net/L9qvpL32/2/

Я просто изменил порядок ваших элементов и изменил некоторые ширины :)

Если вы не хотите, панель поиска, чтобы изменить положение просто изменить к

#searchBar-form { 
    position: relative; 
    overflow: hidden; 
    min-width: 200px; 
} 

Answer 2

Это то, что вы ищете? (Вам нужно будет уточнить его немного, чтобы остановить поиск прячась полностью на небольших экранах) http://jsfiddle.net/zxctbynn/

<header> 
    <div class="left"></div> 
    <form id="searchBar-form" class="centre"> 
     <input type="text" id="searchBar" placeholder="Search..."> 
    </form> 
    <div class="right"></div> 
</header> 

header { 
    position: fixed; 
    top: 0px; 
    z-index: 300; 
    width: 100%; 
    height: 48px; 
    background-color: blue; 
    display: inline; 
} 

.left{ 
    top: 0; 
    background-color: red; 
    width: 100px; 
    height:100%; 
    position: absolute; 
} 

.centre{ 
    top: 0; 
    background-color: blue; 
    width: auto; 
    left: 100px; 
    right: 100px; 
    height:100%; 
    position: absolute; 
    padding: 0; 
} 

.centre input{ 
    width: 100%; 
} 

Answer 3

header { 
    position: fixed; 
     top: 0px; 
    z-index: 300; 
    width: 100%; 
    height: 48px; 
    background-color: blue; 
    float:left; 
} 
form{ 
    width:80%; 
    float:left; 
} 

#page-nav-left { 
    display: inline-block; 
    height: 100%; 
    width: 20%; 
    margin: 0 auto; 
    padding: 0px;  
    float: left; 
    background-color: red; 
} 

#page-nav-right { 
    display: inline-block; 
    height: 100%; 
    width: 20%; 
    margin: 0 auto; 
    padding: 0px;  
    float: left; 
    background-color: red; 
} 

#searchBar-form { 
    position: relative; 
    overflow: hidden; 
    width:60%; 
} 

#searchBar { 
    padding: 4px 15px; 
    background-color: white; 
    width: 100%; 
} 

#searchBar-button { 
    float: right; 
    padding: 4px 15px; 
    border: 0px solid #207cca; 
    color: black; 
} 

Я предполагаю, что это то, что вы хотите. Вы устанавливаете навигацию в пикселях. Всегда проверяйте скорость на%. http://jsfiddle.net/L9qvpL32/1/

Answer 4

Вам следует попытаться использовать flexbox. С помощью flexbox вы можете плавать столько div, сколько вы в одной строке, и они будут реагировать как на родителя, так и на другого.

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

• дисплей: гибкий; ==> превращает его модель Flexbox
• прогибается вырастали: 0/1 (или другой) ==> текущее окно может расти, если есть оставшееся пространство
• прогибается термоусадочные: 0/1 (или другой) ==> текущее окно может сокращаться, если есть меньше места, то элементы шириной

Вы можете найти удивительный учебник для Flexbox здесь: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

header { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    
 
\t position: fixed; 
 
\t top: 0px; 
 
\t z-index: 300; 
 
\t width: 100%; 
 
\t height: 48px; 
 
    
 
    background-color: blue; 
 
} 
 

 
#page-nav-left { 
 
    -webkit-flex-grow: 0; 
 
    flex-grow: 0; 
 
    -webkit-flex-shrink: 0; 
 
    flex-shrink: 0; 
 
    
 
    width: 100px; 
 
    
 
    background-color: red; 
 
} \t 
 

 
#page-nav-right { 
 
    -webkit-flex-grow: 0; 
 
    flex-grow: 0; 
 
    -webkit-flex-shrink: 0; 
 
    flex-shrink: 0; 
 
    
 
    width: 100px; 
 
    background-color: red; 
 
} 
 

 
#searchBar-form { 
 
    -webkit-flex-grow: 1; 
 
    flex-grow: 1; 
 
    -webkit-flex-shrink: 1; 
 
    flex-shrink: 1; 
 
} 
 
#searchBar { 
 
    width: 100%; 
 
    max-width: 400px; 
 
} 
 
    
 

 
#searchBar-button { 
 
\t padding: 4px 15px; 
 
\t border: 0px solid #207cca; 
 
\t color: black; 
 
}

<header> 
 
     
 
\t \t <nav id="page-nav-left" role="navigation"> </nav> 
 

 
\t \t <form id="searchBar-form"> 
 
      
 
\t   <input type="text" id="searchBar" placeholder="Search..."> 
 
\t  </form> 
 
       
 
\t \t <nav id="page-nav-right" role="navigation"> </nav> 
 

 
</header>