问题：

元素落在视口之外

邢飞昂

2023-03-14

我是CSS的新手，我试图重新创建一个网站。下面是代码:https://codepen.io/danamaria5/pen/mdvzrmm。直到现在我还有几个问题:

https://imgur.com/a/stc5bzp。 “我们是谁”部分落在视口之外，产生了不需要的空格。我觉得奇怪的是，这种情况只发生在浏览器中。当我在响应设置中检查元素时，两个部分都比视区大一点，但没有空格。

  @import
  url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;700;900&display=swap" rel="stylesheet');

* {
  box-sizing: border-box;
}

  
  body {
      margin: 0;
      font-family: 'Raleway' , sans-serif;
      text-align: center;
      }

img {
  max-width: 100%;
  height: auto;
}


.container {
  width: 95%;
  max-width: 70em;
  margin: 0 auto;
  
}


/* typography
================== */
h1 {
  font-weight: 300;
  font-size: 1.7rem;
  margin-top: 0;
}

p {
 margin-top: 0; 
  line-height: 1.5;
}

p:last-of-type {
  margin-bottom: 0;
}

.title {
  font-size: 2.5em;
  margin-top: 1em;
  margin-bottom: 1.5em;
  font-weight: 900;
}


.title span {
  font-weight: 300;
  display: block;
  font-size: .9em;
}


@media(min-width:60rem) {
  p {
      font-size: 1.2rem;
      line-height: 1.6;
  }
  .title {
      font-size: 3.7em;
  margin-bottom: 1em;
      margin-top: 0;
  font-weight: 900;
      }  
}


/* buttons */

.button {
  display: inline-block;
  font-size: 1.15em;
  text-decoration: none;
  text-transform: uppercase;
  border-width: 2px;
  border-style: solid;
  padding: .5em 1.75em;
  color: #00ff6c;
  border-color: #00ff6c;
}

@media (min-width: 60rem) {
  .button {
      font-size: 1.5rem;
  }

.button-small {
  font-size: .7rem;
  font-weight: 700;
}
.button-accent {
  color: #00ff6c;
  border-color: #00ff6c;
}


.button-accent:hover,
.button-accent:focus {
  background: #00ff6c;
  color: #232323;

   
}


}


/* header
================== */


header{
position: absolute; 
  margin-top: 1em;
  left: 0;
  right: 0;
  margin: 1em;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li{
  display: inline-block;
  margin: 1em;
  
}

nav a {
  font-weight: 900;
  text-decoration: none;
  padding: .5em;
  text-transform: uppercase;
  color: #FFF;
  font-size: .8rem;
  
}

nav a: hover , 
nav a: focus {
  color: #DDD;
}


@media(min-width:60rem) {
  .logo {
      float: left;
  }
  
  nav {
      float: right;
  }
}






/* home-hero
================== */


.home-hero {
  background-image: url(https://i.postimg.cc/XY54RwQY/hero-bg.jpg);
  background-size: cover;
  background-position: center;
  padding: 10em 0;
  color: #FFF;
}

@media (min-width: 60rem) {
  .home-hero {
      height: 100vh;
      padding-top: 35vh;
  }
}


/* hero-home
======================== */

.home-about-textbox {
  background-color: #232323;
  padding: 4em;
  width: 100vw;
  margin-left: -2.5%;
  outline: 2px solid #00ff6c;
  outline-offset: -2.5em;
  color: #FFF;
  position: relative;
}

.home-about-textbox h1 {
  color: #00ff6c;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: .75em;
  background: #232323;
  padding: 0 .145em;
}

@media (min-width: 25rem) {
  h1 {
      font-size: 2 rem; 
  }
  
  .home-about-textbox h1 {
     top: .6em; 
      padding: 0 .325em;
  }
}

  
  
  @media (min-width: 60rem) {
  h1 {
      font-size: 2.5rem;  
  }
      
      .home-about {
          background-image: url(https://i.postimg.cc/85v1SL1H/who-we-are.jpg);
          background-repeat: no-repeat;
          padding-bottom: 10em;
          
      }
      
.home-about-textbox {
  width: 50%;
  padding: 7em;
  outline-offset: -3.75em;
  margin-left: -2.5%;
  top: -5em;
  text-align: left;
  box-shadow: 0 0 4em 0 rgba(0,0,0,.3);
  
}
      
      
  
  .home-about-textbox h1 {
     top: .75em; 
      left: 6rem;
      position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: .75em;
  background: #232323;
  padding: 0 .145em;

  }
}





/* portofolio
=================== */

HTML


 <body>
    
    <header>
        <img  src="https://i.postimg.cc/NFtwcdYg/logo.png" alt="Creative inc. logo" class="logo">
        <nav>
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <section class="home-hero">
       <div class="contaier">
        <h1 class="title">Making things looks great
            <span>for companies who make great stuff</span>
            </h1>
            <a href="" class="button button-accent">See Our Work</a>
        </div>
    </section>
    
     
    <div class="container">
    <section class="home-about">
    
    <div class="home-about-textbox">
        <h1>Who we are</h1>
        <p>Sit by the fire drink water out of the faucet hide head under banket so no one can see cat is love, cat is life.Knock dish off table eating always hungry so favor packaging over toy.</p> 
        <p><srong>Rub face on owner.</srong>Peer out window, chatter at birds, lure then to mouth. Chase ball of string eat a plant, kill a hand, i am the best have secret plans.</p>
    </div>
        </section>
        </div>
        
        
        <section class="portofolio">
            <h1>Some of our work</h1>
            
            
            <!-- portofolio item 01 -->
            
<figure class="port-item">
    <img src="https://i.postimg.cc/fbqkVLYp/portfolio-01.jpg" alt="portofolio item">
    <figcaption class="port-desc">
    <p>Project title</p>
        <a href="" class="button button-accent button-small">Project details</a>
    </figcaption>
</figure>
        
        
       <!-- portofolio item 02 -->
            
<figure class="port-item">
    <img src="https://i.postimg.cc/wv8CDZpX/portfolio-02.jpg" alt="portofolio item">
    <figcaption class="port-desc">
    <p>Project title</p>
        <a href="" class="button button-accent button-small">Project details</a>
    </figcaption>
</figure>
        
        
         <!-- portofolio item 03 -->
            
<figure class="port-item">
    <img src="https://i.postimg.cc/tJtn9KX2/portfolio-03.jpg" alt="portofolio item">
    <figcaption class="port-desc">
    <p>Project title</p>
        <a href="" class="button button-accent button-small">Project details</a>
    </figcaption>
</figure>
        
        
        
         <!-- portofolio item 04 -->
            
<figure class="port-item">
    <img src="https://i.postimg.cc/cH3XBLmC/portfolio-04.jpg" alt="portofolio item">
    <figcaption class="port-desc">
    <p>Project title</p>
        <a href="" class="button button-accent button-small">Project details</a>
    </figcaption>
</figure>
        
        
        
        
         <!-- portofolio item 05 -->
            
<figure class="port-item">
    <img src="https://i.postimg.cc/fbCwTMX3/portfolio-05.jpg" alt="portofolio item">
    <figcaption class="port-desc">
    <p>Project title</p>
        <a href="" class="button button-accent button-small">Project details</a>
    </figcaption>
</figure>
        
        
        
        
         <!-- portofolio item 06 -->
            
<figure class="port-item">
    <img src="https://i.postimg.cc/K8zXrtgY/portfolio-06.jpg" alt="portofolio item">
    <figcaption class="port-desc">
    <p>Project title</p>
        <a href="" class="button button-accent button-small">Project details</a>
    </figcaption>
</figure>
       
       
       
       <footer>

 <div class="span-3">        
     <p>Shoreditch bespoke leggings, tote bag williamsburg woke retro readymade scenester brunch art party farm-to-table pug. Wayfarers lyft prism, edison bulb distillery pok pok narwhal pinterest poke.</p>
     
</div> 
     
     <div class="col-3">
      
      <ul class="unstyled-list">
         <li><strong>Shoreditch</strong></li>
         <li>Shoreditch</li>
         <li>Woke retro</li>
         <li>Readymade</li>
         <li>Scenester</li>
         </ul>
         
           </div>
         
          <div class="col-1">
      
      <ul class="unstyled-list">
         <li><strong>Shoreditch</strong></li>
         <li>Shoreditch</li>
         <li>Woke retro</li>
         <li>Readymade</li>
         <li>Scenester</li>
         </ul>
         
           </div>
             
              
         <div class="col-1">
          <ul class="unstyled-list">
         <li><strong>Shoreditch</strong></li>
         <li>Shoreditch</li>
         <li>Woke retro</li>
         <li>Readymade</li>
         <li>Scenester</li>
         </ul>
           </div>
         
         
       </footer>
        
        
      
    
    
    
      
            
    
    
          <title></title>

    </section>
    </body>
</html>

2）标题与以960px开头的正文文本重叠。

谢谢

共有2个答案

施敏达

2023-03-14

在移动CSS中尝试:

.home-about-textbox {
    background-color: #232323;
    padding: 4em;
    margin: 0 -2.5vw; 
    outline: 2px solid #00ff6c;
    outline-offset: -2.5em;
    color: #FFF;
    position: relative;
    /* 
    //width: 100vw; Removed, this is causing "falling outside of viewport" issue
    //margin-left: -2.5%; Removed
    //margin: 0 -2.5vw; Added, As its parent is 95% and we need to increase 5% width more according to VW
    */
}

楚茂实

2023-03-14

我看不到空格，但是当元素被定位为绝对并且没有约束维度时，这种情况经常发生。

如果“脱离视区”是指文本的行中断，这是因为文本没有空间在行上呈现，默认样式是换行。要避免这种情况，请使用padding或white-space:nowrap来防止文本换行。

类似资料：

selenium视口中元素的验证

问题内容：如何使用selenium验证元素是否在视口中可见（浏览器的可见性）？我尝试使用下面的代码，但是Point对象（Y值）由于页面可滚动而返回巨大的值。这是获取元素尺寸，浏览器的位置和尺寸并进行比较。如果有人为此工作，请您分享解决方案？问题答案：无法直接通过API进行操作，因此您必须使用脚本注入。确定元素在视口中是否可见的最佳方法是使用document.elementFromPoi
jQuery检查元素是否在视口中可见

问题内容：检查div类“ media”是否在浏览器的可视视口内的函数，而不管窗口的滚动位置如何。试图通过此功能使用此插件，但我不知道如何使它工作。问题答案：好吧，您如何尝试使其工作？根据该插件的文档，返回一个布尔值，指示该元素是否可见。因此，您可以像这样使用它：
AngularJS：换行符到段落元素

问题内容：在Angular中，我需要从包含换行符的文本块中生成一系列段落元素吗？我可以想到几种方法来做到这一点。但是我想知道是否有一种“官方的” Angular方法，或者在AngularJS上下文中最优雅的方法是什么？一个例子从： Lorem ipsum dolor坐下来，管教着迷。\ n Sed diam nonummy nibh euismod tincidunt ut laoreet
AngularJS：段落元素的换行符

在Angular中，我需要从包含换行符的文本块中生成一系列段落元素？我可以想出几种方法来做到这一点。然而，我想知道是否有一种“官方”的角度方法，或者在AngularJS的背景下，最优雅的方法是什么。发件人： Lorem ipsum dolor sit amet，concetetuer adipiscing elit。\我的名字叫尤伊斯莫德·丁奇登，名字叫拉奥里特·多洛尔。\n 大aliquam
elementIsVisibleInViewport - 判断元素是否在可视窗口可见

如果指定的元素在可视窗口中可见，则返回 true ，否则返回 false 。使用 Element.getBoundingClientRect() 和 window.inner(Width|Height) 值来确定给定元素是否在可视窗口中可见。省略第二个参数来判断元素是否完全可见，或者指定 true 来判断它是否部分可见。 const elementIsVisibleInViewport = (
在喷口和螺栓之间掉落的消息

我实现了一个从Kafka队列读取消息的heron拓扑。因此，我的拓扑有一个kafka喷口和一个计算从队列读取的消息数的bolt。
在其他元素之前选择特定元素

问题内容：我有以下HTML结构：我只想选择之前的内容。我怎样才能做到这一点？在我的内容中，越来越多的东西，因此解决方案应该是通用的。问题答案：据我所知，CSS没有提供将在* 选择器之前定位的任何选择器。您能否将其选择为（）之后的？ * 如您所见，这可能是您依赖CSS时可以使用的最佳选择器，尽管您可以轻松地向之前的每个类添加一个类。这样可以避免您在另一个段落和段落节之前有一个段落节的情况
CSS3-Animate元素（如果在视口中可见）（页面滚动）

问题内容：我在html页面上的各个div元素中添加了CSS动画。但是所有动画同时播放，并且我无法在页面底部看到动画。如何在向下滚动页面时播放它们？问题答案：你需要使用 JS 或 jQuery的，以触发您的 CSS3 过渡/动画一旦元素是视**。 jsFiddle演示- 使用inViewport插件侦听，以及获取事件（如果元素进入视口）。您可以使用我构建的一个小型jQuery

元素落在视口之外

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档