Question

我在asp.net中创建了一个网页。它在正常屏幕下工作正常。当在更宽的屏幕上显示时，侧面和底部都有很多白色空间。如何适应所有屏幕尺寸的页面。我在前面的帖子中看到以％为单位设置宽度。但它没有成功。任何人都可以帮助我吗？提前谢谢。

Answer 1

我同意你需要更加具体试试这个css代码。

body{
width:100%;
height:100%;
}

然后，您可以创建具有固定百分比宽度和高度的容器DIV 创建你网页的部分内容，如标题，侧边栏，主要内容，页脚等等。

如果正确使用％方法，％方法是最可行的方法。发布html / css / js的jsfiddle以获得特定帮助。

Answer 2

您可以通过定义top，right，bottom和left css属性来尝试根元素的绝对定位（从body标签向下一步）。像这样的东西： #page{ positioning: absolute; top: 0; right: 0; bottom: 0; left: 0; } 然后将其他元素放在该根元素内。

Answer 3

你有几个选择：

使用背景将html或body标签设置为100％宽度。然后将网站其余部分的容器设置为所需像素大小的最大宽度。这将阻止您的网站全部展开，看起来凌乱，但仍然可以解决空白问题。像这样：

body {
background:#HEX url(images/2000pxwideimage.png);
width:100%;
}

#wrapper {
max-width:960px;
}

您可以使用css3媒体查询根据屏幕宽度调整网站的布局。这样做的好处是可以适应越来越小的屏幕尺寸同时保持你的布局美观，在某些情况下可能意味着提供显着不同的CSS。一个示例可能是水平导航，在较小的屏幕尺寸下，您希望成为一个易于使用的垂直导航。这看起来像这样：

@media (min-width:960px) {
/* Browser window must be at least 960px wide to get these rules */
}

@media (max-width:320px) {
/* Something similar to this would work for very small screens like phones */
}

设置所有屏幕分辨率的网页

3 个答案: