在窗口调整页面大小调整大小

我正在设计一个网页，并希望布局保持不变，而不管屏幕大小。我已经看过POSITION变量，比如固定的，绝对的和相对的以及解释，但是找不到明确的答案。我相信这与嵌套部门有关。有人能给我一个更明确的答案，说明这是如何工作的吗？由于在窗口调整页面大小调整大小

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
     <link href='http://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'> 
     <title></title>Test 
     <style type="text/css"> 
      body 
      { 
       margin:0; 
       padding:0; 
       width:1300px; 
       height:650px; 
       color: black; 
       position:relative; 
       font-family: 'Satisfy', cursive; 
       background: #F4EEFE url(backgrounds/linen2.jpg) center center fixed no-repeat; 
      table td { border:0;vertical-align:top; } 
#main {margin:0 auto;} 
table.master {position:absolute;width:100%;height:100%;} 
td.david {position:relative;} 
td.richard {position:relative;vertical-align:bottom;} 
td.forBackground{vertical-align:middle;} 
td.middle{height:100px;} 
#david{margin-top:10%;} 
#richard{margin-bottom:15%;} 
img.top{z-index:999;} 
#button{z-index:999;display:block;text-decoration:none;bottom:2px;  height:25px;clear:both;float:right; margin-left:47%; position:fixed; border:0px; padding:0px;} 
img.davidbio{z-index:999;display:block;text-decoration:none;bottom:15%; height:200px;width:250px;clear:both;float:left; margin-left:11%; position:fixed; border:0px; padding:0px;} 
     </style> 
</head> 
<body> 
<div id="container" class="container"> 
<div id="background-image" class="background-image"></div> 
<div id="content"> 
<center> 
    <table class="master" border="0"> 
    <tr> 
     <td width="20%" class="david"><div id="david"><?php include('david.php'); ?></div>     </td> 
     <td width="55%" class="forBackground"> 
<div id="main" class="main"> 
<center> 
<table class="background" border="0"> 
    <tr> 
     <td> 
     </td> 
    </tr> 
    <tr> 
     <td class="middle"><center><br/><br/><font size="5">Text here</font> <br/><font size="7">Names here</font></center></td> 
    </tr> 
    <tr> 
     <td class="middle"><center><img src="heart.png" title="" alt="" width="200px" height="150px" /></center></td> 
    </tr> 
    <tr> 
     <td class="middle"><center><font size="5">Date<br/> 
     Time<br/> 
     Location</font></center></td> 
    </tr> 
    <tr> 
     <td> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     </td> 
    </tr> 
</table> 
</center> 
</div> 
    </td> 
    <td width="20%" class="richard"><br/><br/><br/><div id="richard"><?php include('richard.php'); ?></div></td> 
    </tr> 
</table> 
</center> 
</div> 
<input type="button" name="button" id="button" class="button" value="&nbsp;Click Here;" onClick="MyWindow=window.open('input.php','MyWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no')" style="color:#F7D358;background-color:#D33033;border:1px solid; 
border-top-right-radius:2em; 
border-top-left-radius:2em; 
border-bottom-right-radius:2em; 
border-bottom-left-radius:2em;"></button> 
<img src="davidbio.png" class="davidbio" alt="" title=""/> 
</div> 
</body> 
</html>

的jsfiddle：http://jsfiddle.net/9hdz2/1/

来源

2014-02-27 user3125362

不使用百分比宽度，使用精确的像素值.... – rorypicko

我建议你从本周初创企业，很不错的介绍网页设计响应播放列表https://www.youtube.com/watch?v=yuk4BwEO3C4&list=PLlb3EKZfhFUxKFVMT2lpv2lw498z0fb2l – CodeFanatic

我认为这是不响应与每次我都只是复制你的代码的jsfiddle设备 – sanjeev

如果你想所有元素留在同一位置的任何窗口的大小，你需要换一个标签所有这些元素（例如div）和给它一个固定的宽度。

例如（可以说该容器有一个id：#container），CSS：

#container{ 
    width:960px; 
    margin:0 auto; /*this is to horizontaly center the element 
        in the window if the window is wider than 960px/* 
    }

然后，你需要在它里面的元素使用相对或静态（默认）的定位，你可以使用百分比作为它们是根据固定的父维度计算的。

如果您给#container一个相对位置，您也可以使用绝对定位。

为了您的目的，我会避免使用固定位置的元素，因为它们的位置是根据窗口计算的，因此不会遵循#container流程。

这个解释很简单，所以我强烈建议你仔细阅读一下CSS定位的更全面的定义。

你可以在这里找到一些：

CSS positioning overview

来源

2014-02-27 13:05:42

在窗口调整页面大小调整大小

回答

相关问题