オルタナティブ：隠されたdiv要素を伸ばすために、ギャップを埋め、子供たちを保つためには、入力されたdiv要素を検索し、「ストレッチ」と私は（右に左のロゴ、メニュー）を標準ヘッダのレイアウトを持っている

Question

親と同じサイズをDIV焦点が合ったときに未使用のセンタースペースを占める右側にあります。私は作業を得ることができる解決策は、それが空きスペースの残りの部分を埋めるために取得するには、検索のdiv要素にwidth: inheritとoverflow: hiddenを追加しました。問題は、検索結果が検索入力の下に同じ幅で表示されることです。私が最初に考え

は、検索のdivの外の結果を配置することでしたが、その後、私は、検索入力のdivの同じ幅と位置を一致させるために、検索結果のdivを得ることができるのか分かりません。

$(function(){ 
 
\t 
 
\t $('.field').focus(function(){ 
 
\t \t $('.search').addClass('focused'); 
 
\t \t $('.search-results').show(); 
 
\t }); 
 
\t $('.field').blur(function(){ 
 
\t \t $('.search').removeClass('focused'); 
 
\t \t $('.search-results').hide(); 
 
\t }); 
 
\t 
 
});

*, *:before, *:after { 
 
    box-sizing: border-box; 
 
} 
 

 
header, section { 
 
    max-width: 72em; 
 
    margin: 0 auto; 
 
} 
 

 
section { 
 
    clear: both; 
 
    padding: 25px 0; 
 
    background: #f8f8f8; 
 
} 
 

 
.logo, .menu { 
 
    float: left; 
 
    width: 75px; 
 
    height: 75px; 
 
    background: #ddd; 
 
} 
 

 
.menu { 
 
    width: 250px; 
 
    float: right; 
 
} 
 

 
.search { 
 
    position: relative; 
 
    float: right; 
 
    height: 75px; 
 
    line-height: 75px; 
 
    background: #eee; 
 
    width: 250px; 
 
    /* 
 
    * Overflow: hidden is the root of one problem and a 
 
    * solution to another filling the extra space. 
 
    */ 
 
    overflow: hidden; 
 
} 
 
.search .field { 
 
    width: 100%; 
 
    border: 1px solid #ccc; 
 
} 
 
.search.focused { 
 
    width: auto; 
 
    float: none; 
 
} 
 

 
.search-results { 
 
    display: none; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 100%; 
 
    background: salmon; 
 
    height: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
\t <div class="logo">Dynamic Width</div> 
 
\t <div class="menu">Dynamic Width</div> 
 
\t <div class="search"> 
 
\t \t <form> 
 
\t \t \t <input type="text" class="field" placeholder="Search"> 
 
\t \t </form> 
 
\t \t <div class="search-results"></div> 
 
\t </div> 
 
</header> 
 
<section> 
 
\t <p>This content should not be moved.</p> 
 
</section>

は、ここで私は入力がフォーカスされたときに達成するために期待していますものです。

私はコンテンツがオーバーフローの外に出ないこともよく知っています：隠れた境界。問題は、オーバーフローをエミュレートする方法です：隠されたスペースを取るために隠され、子divsが前記エリア内に収まるようにする方法です。どのように私がこれを達成するかもしれないかに関する提案は高く評価されるでしょう。

Answer 1

Uにoverflow-x:hiddenを設定した結果を表示する必要があるとして、あなたのheaderこれはフレックスボックスソリューションですdisplay: flex;

Answer 2

あなたはそれを取ることができるように.searchに固定された高さの除去、（.menuと.logoによって75pxに固定）ヘッダのサイズを相殺するために身体にいくつかのパディングを追加し、position:absoluteにヘッダを設定することによって、これを達成することができます多くの高さとして、それはあまりにも、最終的にのみ.search

$(function(){ 
 
\t 
 
\t $('.field').focus(function(){ 
 
\t \t $('.search').addClass('focused'); 
 
\t \t $('.search-results').show(); 
 
\t }); 
 
\t $('.field').blur(function(){ 
 
\t \t $('.search').removeClass('focused'); 
 
\t \t $('.search-results').hide(); 
 
\t }); 
 
\t 
 
});

*, *:before, *:after { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    padding-top: 75px; 
 
} 
 

 
header, section { 
 
    max-width: 72em; 
 
    margin: 0 auto; 
 
} 
 

 
header { 
 
    position: absolute; 
 
    width: 100%; 
 
    top: 0; 
 
} 
 

 
section { 
 
    clear: both; 
 
    padding: 25px 0; 
 
    background: #f8f8f8; 
 
} 
 

 
.logo, .menu { 
 
    float: left; 
 
    width: 75px; 
 
    height: 75px; 
 
    background: #ddd; 
 
} 
 

 
.menu { 
 
    width: 250px; 
 
    float: right; 
 
} 
 

 
.search { 
 
    position: relative; 
 
    float: right; 
 
    line-height: 75px; 
 
    background: #eee; 
 
    width: 250px; 
 
    /* 
 
    * Overflow: hidden is the root of one problem and a 
 
    * solution to another filling the extra space. 
 
    */ 
 
    overflow-x: hidden; 
 
} 
 
.search .field { 
 
    width: 100%; 
 
    border: 1px solid #ccc; 
 
} 
 
.search.focused { 
 
    width: auto; 
 
    float: none; 
 
} 
 

 
.search-results { 
 
    display: none; 
 
    left: 0; 
 
    right: 0; 
 
    background: salmon; 
 
    height: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
\t <div class="logo">Dynamic Width</div> 
 
\t <div class="menu">Dynamic Width</div> 
 
\t <div class="search"> 
 
\t \t <form> 
 
\t \t \t <input type="text" class="field" placeholder="Search"> 
 
\t \t </form> 
 
\t \t <div class="search-results"></div> 
 
\t </div> 
 
</header> 
 
<section> 
 
\t <p>This content should not be moved.</p> 
 
</section>

Answer 3

があり、

https://codepen.io/kejt/pen/jwrzZm

あなたsearchboxがflex-grow:1を持っているヘッダにフレキシボックスソリューションを歌います。私は助けて欲しい。

$(document).ready(function(){ 
 
    $('.field').focus(function(){ 
 
     $('.search').addClass('focused'); 
 
     $('.menu').removeClass('grow'); 
 
    }); 
 
    $('.field').focusout(function(){ 
 
     $('.search').removeClass('focused'); 
 
     $('.menu').addClass('grow'); 
 
    }); 
 
});

header{ 
 
    height:100px; 
 
    display: flex; 
 
    } 
 
    .logo{width:120px;} 
 
    .menu{ background-color: orange;} 
 
    .menu.grow {flex-grow: 1;} 
 
    .field{width: 100%;box-sizing: border-box;} 
 
    .search{background-color: #ddd;} 
 
    .search.focused{ 
 
    flex: 1; 
 
    }

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<header> 
 
\t 
 
\t <div class="menu grow">Dynamic Width</div> 
 
\t <div class="search"> 
 
\t \t <form> 
 
\t \t \t <input class="field" placeholder="Search" type="text"> 
 
\t \t </form> 
 
\t \t <div class="search-results"></div> 
 
\t </div> 
 
    <div class="logo">Dynamic Width</div> 
 
</header>