CSS 如果元素可见，则更改正文边距大小

Posted 2023-03-06

【中文标题】CSS 如果元素可见，则更改正文边距大小

【英文标题】：CSS Change body margin size if an element is visible

【发布时间】：2014-07-04 07:39:00

【问题描述】：

我在页面顶部有一个固定位置的菜单栏（比如说）50px 高，body 也有 50px 的上边距。在菜单栏上方，可能有一条高度不同的错误消息。这种变化意味着主体顶部的边距需要相应地改变。

我想避免在此处使用 javascript，但如果不可能，我将使用它作为最后的手段。

http://subjectplanner.co.uk/Me/ 是页面外观的一个示例。如果您单击错误消息，它将消失，这就是页面的外观。

html 代码：

<div id="NavWrapper">
    <div id="NavErrorWrapper" class="Notification">
        <div id="NavError">You must be logged in!</div>
    </div>
    <div id="NavBar">
        <a href="/index" id="NavLogo"><img src="logo.png" /></a>
        <div class="HideIfJavaOff"><a href="#" id="NavMenu"><img src="menu.png" /></a></div>
        <div class="MenuClear"></div>
        <!-- MENU LIST HERE -->
    </div>
</div>
<!-- End Floating Navigation Bar -->
<!-- Responsive Wrapper -->
<div id="MainWrapper">
    <!-- CONTENT HERE -->
</div>
</body>

CSS 代码：

#NavWrapper
    width: 100%;
    z-index: 1;
    top: 0;
    position: fixed;
    height:70px;

#NavErrorWrapper
    z-index: 3;
    text-align: center;
    width: 100%;
    padding: 7px;
    background-color: rgb(255, 148, 148);
    border-bottom-style: solid;
    border-bottom-color: rgb(252, 88, 88);
    border-bottom-width: 3px;
    display: block;

#NavError
    width: 100%;
    max-width: 900px;
    margin: 0 auto;

#NavBar
    overflow: hidden;
    display: block;
    width: inherit;
    max-width: 900px;
    z-index: 2;
    height:auto;
    margin: 0 auto;
    background-color: #fff;

【问题讨论】：

尝试将px 值更改为% 值？此外，您有两个 z-index: 999; 实例，这肯定是错误/错字。实际上，如果列出的 HTML 包含 z-index 的唯一实例，您应该使用 1、2 和 3，而不是 995、999 和 999（或任何您想要输入的内容），因为前者是更好的做法。

【参考方案1】：

我不认为只有 CSS 的解决方案是您将在这里获得的，就完全动态和让您的内容按比例匹配而言。对于最少数量的 javascript，当您触发错误时，我会在正文上切换一个类，在删除错误后将其删除。然后在 css 中，您可以应用必要的填充/过渡/任何东西来保持适当的比率。

【参考方案2】：

你不能在 CSS 中遍历 DOM，所以你需要 JS。您可以使用以下内容：

var errorMessage = document.getElementById('NavErrorWrapper');
if(errorMessage)
  document.body.style.marginTop = '115px';

检查错误信息是否存在。如果是这样，请修改边距。不过，这假设错误消息始终是相同的高度。如果它具有动态高度，则必须计算它，然后将其添加到 80px，如下所示：

var errorMessage = document.getElementById('NavErrorWrapper');
if(errorMessage)
  document.body.style.marginTop = (errorMessage.offsetHeight + 80) + 'px';

如果元素被点击并因此被隐藏，只需使用以下命令将边距返回到80px：

if(errorMessage) 
  errorMessage.addEventListener('click',function()
    document.body.style.marginTop = '80px';
  );

---

如果你需要test whether the element is hidden，正如你的标题所暗示的那样：

function isHidden(el) 
  if (el.offsetParent === null) 
      return true;
  
  return false;


var errorMessage = document.getElementById('NavErrorWrapper');
if(errorMessage && !isHidden(errorMessage))
  document.body.style.marginTop = (errorMessage.offsetHeight + 80) + 'px';


if(errorMessage) 
  errorMessage.addEventListener('click',function()
    document.body.style.marginTop = '80px';
  );

【参考方案3】：

实现这一点的方法是通过结合 javascript 和 css 假设我们将使用您当前实现的所有 css。

对于 css 部分，我们将使用一个名为“errorReveal”的新类，我们将根据您是否希望显示错误将其附加到 navWrapper div。

.errorReveal 
    transform: translate3d(0,45px,0);
    -webkit-transform: translate3d(0,45px,0);
    -moz-transform: translate3d(0,45px,0);
    -ms-transform: translate3d(0,45px,0);
    -o-transform: translate3d(0,45px,0);

45px 应根据错误消息的大小进行调整。

以下是更改对象类的快速函数，将用于添加此类。

var togClass ( obj, class ) 

     if( obj.className.search( class ) == -1 ) 

        obj.className += class;

     else 

        obj.className.replace( class, "");

    

接下来很容易决定何时使用此功能。

var elNavWrapper = document.getElementById("NavWrapper");
var someErrorCheckFunction( fakeArg)
    //Checkin some stuff
    //checkin some other stuff
    var error = true;
    if(error)
        togClass( elNavWrapper, "errorReveal" );
    

然后简单地在 errorMessage 中添加一个点事件来关闭类

var elErrorWrapper = document.getElementById("NavErrorWrapper");
elErrorWrapper.addEventListener( "mousedown", function()
    togClass( elNavWrapper, "errorReveal" );
);

应该这样做。祝你好运！

ps。对于动态大小，您需要使用 javascript 来获取 ErrorWrapper 的 offsetHeight 然后 使用 javascript 更改转换属性，该函数将替换 togClass 函数。