html - 如何让部分成为 100% 浏览器长度

Question

我只使用 html、css 和 jquery 创建了一个小网站。没有引导...

问题:我的图像和 div 未显示 100% 的浏览器宽度。我的网站周围一直有白色边框。每个 div 都有一个图像作为背景。我试着告诉它在 CSS 中执行 100%，但我只是碰到了手指。

臭氧分区:

<!-- OZONE SECTION
    =============================================== -->
    <section id="ozone">
        <div class="ozone_module">
            <h2>The link between Ozone depletion and Climate Change</h2>
            <p>Atmospheric ozone has two effects on the temperature balance of the Earth. It absorbs solar ultraviolet radiation, which heats the stratosphere. It also absorbs infrared radiation emitted by the Earth's surface, effectively trapping heat in the troposphere. Therefore, the climate impact of changes in ozone concentrations varies with the altitude at which these ozone changes occur. The major ozone losses that have been observed in the lower stratosphere due to the human-produced chlorine- and bromine-containing gases have a cooling effect on the Earth's surface. On the other hand, the ozone increases that are estimated to have occurred in the troposphere because of surface-pollution gases have a warming effect on the Earth's surface, thereby contributing to the "greenhouse" effect.</p>

            <p> the increase in carbon dioxide is the major contributor to climate change. Carbon dioxide concentrations are increasing in the atmosphere primarily as the result of the burning of coal, oil, and natural gas for energy and transportation. The atmospheric abundance of carbon dioxide is currently about 30% above what it was 150 years ago.</p>

            <p>There is an additional factor that indirectly links ozone depletion to climate change; namely, many of the same gases that are causing ozone depletion are also contributing to climate change. These gases, such as the chlorofluorocarbons (CFCs), are greenhouse gases, absorbing some of the infrared radiation emitted by the Earth's surface, thereby effectively heating the Earth's surface.</p>

            <p>Conversely, changes in the climate of the Earth could affect the behavior of the ozone layer, because ozone is influenced by changes in the meteorological conditions and by changes in the atmospheric composition that could result from climate change. The major issue is that the stratosphere will most probably cool in response to climate change, therefore preserving over a longer time period the conditions that promote chlorine-caused ozone depletion in the lower stratosphere, particularly in polar regions.</p>

            <a class="source" href="http://www.esrl.noaa.gov/csd/assessments/ozone/1998/faq9.html" target="_blank"><h4>National Oceanic and Atmospheric Administration </h4></a>

        </div>
    </section><!-- ozone -->

臭氧 CSS:

    /* OZONE */
#ozone {
    background: url('../img/NASA_ozone.jpg') 50% 0 no-repeat fixed;
    min-height: 800px;
    padding: 40px 0px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.ozone_module {
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.75);
  opacity: .9;    
  padding: 2px 8px;
  color: black;
  margin-left: 60%;
  margin-top: 50px;
  margin-right: 15px;
  font: 14px Sans-Serif;
}

Answer 1

在大多数主流浏览器中，所有边的默认边距都是 8px。它由您的浏览器提供的用户代理样式表以像素为单位定义。

尝试使用，

body
{
   margin:0;
}