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

时间:2016-11-30 22:32:12

标签: html css

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

问题: 我的图片和div没有显示100%的浏览器宽度。我的网站周围有一个白色的边框。每个div都有一个图像作为背景。我试过告诉它在css中100%,但我只是得到了手指。

OZONE DIV:

<!-- 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 -->

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;
}

2 个答案:

答案 0 :(得分:1)

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

尝试使用,

body
{
   margin:0;
}

答案 1 :(得分:0)

您可能需要从正文中删除任何默认的填充和边距:

body {
    padding: 0;
    margin: 0;
}

&#13;
&#13;
/* OZONE */

body {
  padding: 0;
  margin: 0;
}
#ozone {
  background: url('http://placekitten.com/g/800/600 ') 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;
}
&#13;
<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 -->
&#13;
&#13;
&#13;