html - CSS:如何设置与浏览器屏幕相关的内容的固定宽度

Question

我是 CSS 和 HTML 的新手，对此我很迷茫。我想将屏幕分成两半，其中一个的宽度等于最大化浏览器屏幕的 50%。而另一个将是灵活的。所以当你将浏览器宽度设置为一半时，其中一个内容将完全可见，而另一个内容将完全隐藏。当然，我希望每个分辨率都相同。

与四方相同:https://foursquare.com/explore?mode=url&near=New%20York%2C%20NY%2C%20United%20States&nearGeoId=72057594043056517 (在浏览器宽度小于 50% 之前， map 被隐藏，条形图信息不受影响)。

示例如下:

body {
  width: 100vw;
  height: 100vh;
}

/*width must be 50% of browser's maximum width, same as bars on foursquare*/

.lefthalf {
  float: left;
  background-color: black;
  width: 50%;
  height: 100%; 
}

/*width is between 0-50% of browser's maximum width, same as map on foursquare*/

.righthalf {
  float: right;
  background-color: red;
  height: 100%;
  width: 50%;
}

<div class="lefthalf"></div>
<div class="righthalf"></div>	

Answer 1

你可以用 Flexbox 做这样的事情:

html, body { /* modified */
  width: 100vw;
  height: 100vh;
  margin: 0; /* recommended */
}

body {
  display: flex; /* displays children inline by default */
}

.lefthalf {
  /*float: left;*/
  background: black;
  flex: 0 0 750px; /* adjust to your needs / doesn't grow nor shrink with the initial width of 750px */
  /*height: 100%;*/
  overflow-x: auto; /* optional / enables horizontal scrolling if the content is wider than 750px (in this case) */
}

.righthalf {
  /*float: right;*/
  background: red;
  /*height: 100%;*/
  /*width: 50%;*/
  flex: 1; /* takes the remaining horizontal space */
}

@media screen and (max-width: 1000px) { /* adjust to your needs */
  .lefthalf {flex: 3} /* always three times wider than the .righthalf between 601px and 1000px screen width */
  .righthalf {flex: 1}
}

@media screen and (max-width: 600px) { /* adjust to your needs */
  body {
    flex-direction: column; /* recommended / stacks children vertically */
  }
  .lefthalf,
  .righthalf {
    flex: 1; /* optional & recommended / each takes half of the body height */
  }
}

<div class="lefthalf"></div>
<div class="righthalf"></div>

.lefthalf 需要在 px 中有一个静态的 width，它不会与定义的 50%< 一起工作 或 50vw 因为它的 width 会根据浏览器的 width 而改变。