2016-11-30 8 views
0

2つの動的テーブルの高さを節約したいと思います。 解決方法はjavascipt( document.getElementById( 'bloc2')。style.height = document.getElementById( 'bloc1').clientHeight)を使用することです。html CSSで2つのブロック(動的行)の高さを節約

HTMLとCSSを使用して他の解決策を見つけることはできますか?

+0

たぶん、あなたはコードを投稿で始まる場合はコメント – LGSon

+0

\t \t \t
Sam 23
\t \t
\t \t \t \t \t \t \t \t
Sam 23masculin work at banktraval
rachedbch

+0

編集コードをあなたを助けるみます持っていますあなたの答えはありがたいですが、解決策はいくつかの行に2つのbloxを持つことになっていました。 – LGSon

答えて

0

英語力が不十分な場合は、を確認してください。)、StackOverflowのスタイリングツールを使用してください。

すべての情報は、こちらをご覧ください。そして、答えとして私は最初に<table>を使わないようにアドバイスしたいと思います。

<div id="container"> 
    <div id="block_1" class="foo"> 
     <!-- Your HTML/text content --> 
    </div> 
    <div id="block_2" class="foo"> 
     <!-- Your HTML/text content --> 
    </div> 
</div> 

とCSSについて(値は一例であり、あなたを使用):

#container { 
    width: 100%; 

    /* The height will be minimum 350px, depending on the content */ 
    min-height: 350px; 

    /* I often use flexbox properties, it does really well the job */ 
    display: flex; 
    flex-flow: row nowrap; 
    justify-content: center; // Default value 
} 

.foo { 
    width: 50%; 
    /* this value will make your 2 blocks the same height according to their container */ 
    height: inherit; 
} 

はフレキシボックスのプロパティを(多くがあります)を確認、それはあなたの仕事を容易にすることができます。

+0

としてそれを投稿していない、それはそのように振る舞うべきで、私達はあなたの質問に – rachedbch

+0

@rachedbchあなたは正しいです。私は私の答えを編集しました、今それは良いはずです。 – AymDev

+0

お返事ありがとうございました、良い場合は – rachedbch