如何在CSS中设置默认页面尺寸？

Question

我正在尝试将Photoshop设计转换为网站，手动编写HTML和CSS。这是我第一次进行此类练习，因此从一开始就遇到页面尺寸方面的问题。

我使用1920像素的页面宽度进行PS设计，这是全屏result。编写CSS时，我将标题宽度设置为1920px，徽标宽度设置为150px（与PS文件中一样）。但是我得到了this（不用担心徽标位置）。

如您所见，页面非常“放大”，滚动条显示在下方。我想不使用滚动条来显示整个页面，就像在PS中一样，保持元素之间的比例相同。

这是我的标头的HTML和CSS代码：

#logo img {
  float: left;
  width: 150px;
  height: 150px;
}

#header {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 1920px;
  /* I also tried width: 100% */
  height: 100px;
  background: #000000;
}

<div id="header">
  <div id="logo">
    <img src="..\codice\export\logo.png" alt="logo">
  </div>
</div>

如代码中所示，我还尝试将标头的宽度设置为100％，但是这样就不考虑徽标比例（150像素/ 1920像素）。

如何用CSS编写：“使用浏览器可视化页面时1920应该是您的100％”？

很抱歉，这是一个愚蠢的问题，但这是我第一次使用这些工具。

Answer 1

我做了这个jsfiddle

您可以使用流畅的width: 100%进行检查，而不应该使用水平滚动条

然后我添加了一个header_content div，其固定宽度为520px（然后您可以看到它居中并放置在适当的位置。但是您需要根据Photoshop标头的宽度来更改该值。

注意：css margin:0 auto使div水平居中。

Answer 2

一些其他HTML和CSS可能会为您解决问题！而且我正在考虑您必须添加尚未完成的FILTER ... ALL。这是我的解决方案。我发表了一些有用的评论，以帮助您正确理解代码。您可以在我的codepen示例中使用相同的代码。

menu

body {
  padding-top: 150px;
  /* if you don't add  this your code will be hidden under the #heade */
}

#logo img {
  float: left;
  width: 150px;
  height: 150px;
}

#header {
  position: absolute;
  top: 0;
  /*No need to add 'px' when the value is 0 */
  left: 0;
  /* I also tried width: 100% */
  right: 0;
  /*Thsi will cover the right side. So no need to declear a width*/
  /* logo has some space at to so we are adding a padding at top*/
  padding-top: 25px;
  height: 75px;
  /* reduce to 75px so header will be just half of the logo image*/
  background: #000000;
}

.container {
  width: 1170px;
  /* hae to make this responsive for smallar devices*/
  box-sizing: border-box;
  margin: 0 auto;
}

.navigation {
  float: right
}


/*Eacaping the  proper code for the navigation so here is some face code */

.navigation {
  color: #fff;
}