当高度超过可视区域时更改页面宽度

Question

我做了一个网站。当正文变得比页面长以显示滚动条时，正文将向左移动几个像素。这让我很困惑。是否有一些自动设置可以做到这一点？

如果你想看的话，这是我的 css。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: center;
}

#cohenImage{
    float:right;
    margin-left:1em;
    border: .2em solid #D3D3D3
}

.block {
    display:block;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}


/*******************************************************************************
Theme Styles
*******************************************************************************/


body {
    box-sizing: border-box;
    color:#373737;
    background: transparent;
    font-family: 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    width: 70%;
    margin-right:auto;
    margin-left:auto;
    padding: 3em;
    background-image:url('../Cohen-Background.jpg');
    background-color:#000000;
}

.inline{
    display:inline;
}

.title {
  margin: 0;
  color: #fff;
  font-size: 300%;
  font-weight: 700;
  text-shadow: #111 0px 0px 10px;
  padding-top:.8em;
  padding-bottom:.7em;
}



h1, h2, h3, h4, h5, h6 {
  margin: 10px 0;
  font-weight: 700;
  color:#222222;
  font-family:'Lucida Grande', 'Calibri', Helvetica, Arial, sans-serif;
  letter-spacing: -1px;
}

h1 {
  font-size: 250%;
  font-weight: 700;
}

h2 {
  padding-bottom: 10px;
  font-size: 250%;
}

h3 {
  font-size: 200%;
}

h4 {
  font-size: 170%;
}

h5 {
  font-size: 120%;
}

h6 {
  font-size: 110%;
}

p {
  font-size:105%;
}

b {
    font-weight:bold;
}

footer p {
  color: #f2f2f2;
}


ul.menu {
    margin: 0;
    padding: 0;
}

ul.menu {
    height: 80px;
    float:left;
}

ul.menu li {
    list-style: none;
    float:left;
    height: 2em;
    text-align: center;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
    background: -o-linear-gradient(top, rgb(100,170,255) 0%,rgb(69,69,69) 100%);
    background: -ms-linear-gradient(top, rgb(100,170,255) 0%,rgb(69,69,69) 100%)
}

ul.menu li a {
    display: block;
    padding: 0 20px;
    text-align: center;
    line-height: 2em;
    text-decoration:none;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
    background: -o-linear-gradient(top, rgb(168,168,168) 0%,rgb(69,69,69) 100%);
    background: -ms-linear-gradient(top, rgb(168,168,168) 0%,rgb(69,69,69) 100%);
    color:white;
    font-weight:bold;
}

ul.menu li a:hover {
    background: #919191;
}

ul li.active a{
    background : #9E9E9E;
}

.wrapper {
    width: 100%;
    height: 2.1em;
    background : #464646;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
    background: -o-linear-gradient(top, rgb(168,168,168) 0%,rgb(69,69,69) 100%);
    background: -ms-linear-gradient(top, rgb(168,168,168) 0%,rgb(69,69,69) 100%)
    position: relative;
}



.inner {
  position: relative;
  padding: 2em;
  margin: 0 auto;
  font-size:105%
}

.header{
  background:rgba(0, 0, 0, 0.9);
  border-top: .3em solid #2E2E2E;
  border-left: .3em solid #2E2E2E;
  border-right: .3em solid #2E2E2E;
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
  text-align:center;
  margin-right:auto;
  margin-left:auto;
  color:white;
}



#main_content_wrap {
  background: #FCFCFC;
  text-align:left;
  padding:0;
  margin:0;
}

#main_content {
  padding-top: 3em;
}

#footer_wrap {
  background:rgba(0, 0, 0, 0.9);
  border-top: .3em solid #2E2E2E;
  border-left: .3em solid #2E2E2E;
  border-right: .3em solid #2E2E2E;
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
  text-align:center;
  margin-right:auto;
  margin-left:auto;
  color:white;
}

table {
    background-color: #EEEEEE;
    border: 2px solid #D4D4D4;
    border-collapse: collapse;
    padding-left: 2px;
}
thead {
    color:black
}
th {
    background-color: #D4D4D4;
    padding-right: 4px;
}
tr, td, th {
    border: 2px solid #D4D4D4;
    padding-left: 4px;
}
dt {
    font-weight: bold;
}

/*******************************************************************************
Small Device Styles
*******************************************************************************/

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
        body{
        width: 100%;
    }
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
        body{
        width: 100%;
    }
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
    body{
        width: 100%;
    }
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    body{
        width: 100%;
    }
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
    body{
        width: 100%;
    }
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
    body{
        width: 100%;
    }
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
    body{
        width: 70%;
    }
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
    body{
        width: 70%;
    }
}

/* iPhone 4 ----------- */
@media

only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    body{
        width: 100%;
    }
}

Answer 1

这是几乎所有浏览器的功能。如果元素对于窗口来说太高，则会出现垂直滚动条。这个滚动条确实占据了窗口以前可用的一些宽度。因此，如果您的 css 取决于窗口的宽度，例如width: 100%，那么这些项目将改变大小。如果您希望垂直滚动条不出现并且不占用您的任何屏幕宽度，请使用以下内容：overflow: hidden 或 overflow-y: hidden

Answer 2

浏览器必须为垂直滚动条腾出空间（并非所有浏览器、Safari 和 OS X 上的 Chrome 都可能将滚动条呈现在内容之上，我很长时间没有测试所以我不确定） .
这是浏览器软件 UI 的元素部分的预期行为：请参阅previous answer 说明这是用户预期的原因，而不是我们网页设计师和网页开发人员需要解决的问题。