2016-10-25 34 views
0

私はasp.netで完全な高さと幅になるウェブページを作る方法を理解しようとしています。私は幅を使用することを知っている:バックグラウンドの100%しかし、私は他のボタンの幅や高さを変更する方法を理解していない、など..ウェブサイトをasp.netの全幅と高さに移動する方法

私はグーグルでそれを検索しますが、私は取得していませんどのように私はそれを作る必要があるか説明する良いチュートリアル。

jqueryまたはjavascriptを使用する必要がありますか?私は現時点でそれらから遠く離れようとしています。

私はこれについて簡単な説明をしていただけますか?

+0

私にあなたのHTMLの例を与える、そしてあなたが幅を設定したいウィッヒ要素100%、あなたが設定したくない要素は100% –

+0

少し良く説明できますか? – berg96

答えて

0

最良の方法、CSSでなければなりません。例えば

、完全な幅と高さ

.full_width { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background-color: #ccc; 
 
    } 
 

 
.element_inside { 
 
    width: 100px; 
 
    border: 1px solid red; 
 
} 
 

 
.button_inside { 
 
    width: 125px; 
 
    height: 60px; 
 
    line-height: 60px; 
 
}
<div class="full_width"> 
 
    I am full width element 
 
    
 
    <div class="element_inside"> 
 
    Low width 
 
    </div> 
 
    
 
    <button class="button_inside"> 
 
    Button 
 
    </button> 
 
    
 
    <button style="width: 100%;"> 
 
    Button full width 
 
    </button> 
 
</div>

に要素を設定しかし、それは絶対的な位置を使用します。

このようなものも使用できます。

応答レイアウト、および異なる画面異なるサイズのために

html { 
 
    display: table; 
 
    width: 100%; 
 
    min-height: 100%; 
 
} 
 

 
body { 
 
    display: table-row; 
 
} 
 

 
.full_width { 
 
    width: 250px; 
 
    display: table-cell; 
 
    vertical-align: top; 
 
    min-height: 100%; 
 
} 
 

 
.full_width { 
 
    border: 1px solid #f00; 
 
}
<div class="full_width"> 
 
    full width container 
 
</div>

、あなたは以下のコードを使用することができます。

@media (min-width: 768px) { 
    .container { 
    width: 740px; 
    } 
} 
@media (min-width: 992px) { 
    .container { 
    width: 960px; 
    } 
} 
@media (min-width: 1200px) { 
    .container { 
    width: 1160px; 
    } 
} 
@media (min-width: SCREEN_WIDTH_IN_PIXELS) { 
    .container { // my element width for this screen 
     width: 1160px; 
    } 
} 
+0

これは私に何をすべきかの良い考えを与えました。しかし、ページが大きくなるとどうなりますか?ボタンの高さと幅は増減しますか?私は24インチの画面を持っています。ページが32インチ以上で読み込まれた場合、ページはデザインが24 'のように表示されますか? – berg96

+0

上記のコードを編集しました。 – Ultrazz008

+0

あなたが追加したコードは、CSSシートにあるはずですか? – berg96

0

ボタン用に異なるCSSコンテナクラスを使用します。 ex。

.body{ 
width: 100% 
} 

button { 
color: #666; 
border-color: #EBEBEB; 
background-color: #EBEBEB; 
text-align: center; 
height:200px; 
width:200px; 
} 

し、ボタンに使用

、UIスタイルを制御する

<button class="button">Button</button> 
関連する問題