如何使网站在asp.net中达到全宽和全高答案

【问题标题】：how to make a website go to full width and height in asp.net如何使网站在asp.net中达到全宽和全高
【发布时间】：2016-10-25 17:43:50
【问题描述】：

我正在尝试了解如何在 asp.net 中制作一个全高和全宽的网页。我知道使用 width: 100% 作为背景，但我不明白如何更改其他按钮、和其他东西的宽度和高度..

我在 google 和 youtube 上搜索，但我没有找到一个很好的教程来解释我应该如何制作它。

我应该使用 jquery 还是 javascript？我现在正努力远离那些。

谁能给我一个简单的解释？

【问题讨论】：

给我你的 HTML 示例，以及你想要设置宽度 100% 的元素，以及你不想设置 100% 的元素
你能解释清楚一点吗？

标签： javascript jquery css asp.net

【解决方案1】：

控制 ui 样式的最佳方式，应该是 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;
   }
}

【讨论】：

这让我知道该怎么做。但是当页面更大时呢？按钮的高度和宽度会增加/减少？我的意思是，我有一个 24 英寸的屏幕。如果页面以 32' 或更大或更小的尺寸加载，页面将显示为 24' 设计的设计？
是的，它是css，它应该在css表格中。

【解决方案2】：

为按钮使用不同的 css 容器类。例如；

.body{
width: 100%
}

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

然后用for按钮，

<button class="button">Button</button>

【讨论】：