CSS 100％高度在React应用程序中不起作用

我正在尝试在我的React应用程序中使用Flexbox来创建占据完整宽度和高度的简单双列网页。CSS 100％高度在React应用程序中不起作用

我可以通过它自己使用HTML和CSS，但不能在React应用程序中使用。

到目前为止，我有：

:root { 
    overflow-x: hidden; 
    height: 100%; 
} 

body { 
    min-height: 100% 
} 

.flexbox { 
    height: 100%; 
    display: flex; 
} 

.left { 
    flex: 0 0 200px; 
    height: 100% 
} 

.right { 
    flex: 1 
}

和：

<div class="flexbox"> 
    <div class="left"> 
    Left 
    </div> 
    <div class="right"> 
    Right 
    </div> 
</div>

我意识到我需要在我index.html占额外<div id="root"></div>标签，所以我还增加了以下内容我的CSS ：

#root { 
    height: 100%; 
}

而我的render功能：

render() { 
    return (
    <div className="flexbox"> 
     <div className="left">Left</div> 
     <div className="right">Right</div> 
    </div> 
) 
}

但这不起作用。列存在但不是全高。为什么不？

来源

2017-10-16 tommyd456

原谅我，如果我听起来很蠢，但你导入CSS文件吧？ – Dane

是的，我是.'left'和'right'实际上有背景颜色，他们显示。 – tommyd456

你可以参考这个链接： - https：// stackoverflow。com/questions/6654958/make-body-have-100-of-the-browser-height –

Body看起来像它的父级（HTML）如何缩放动态属性，所以HTML元素也需要设置它的高度。

但是，身体的内容可能需要动态变化。将最小高度设置为100％将实现此目标。

html { 
 
    height: 100%; 
 
} 
 
body { 
 
    height: 100%; 
 
}

来源

2017-10-16 12:02:02

'html'确实有高度 - 请参阅'：root' – tommyd456

记住 - 这个在React之外工作（HTML和CSS） – tommyd456

检查我的最新编辑。最小高度： - >高度。对我来说工作很好。 –

使用视高台，CSS：

#root { 
    min-height: 100vh; 
}

来源

2017-10-16 12:11:39 zdolny

我真的很想理解为什么我的代码在React应用程序中不起作用？ – tommyd456

它确实没有？它应该可以工作，您可以尝试在“flexbox”类上设置'min-height：100vh;'。它适用于我，也许有些东西会覆盖你的CSS？ – zdolny

@ tommyd456工作示例：https：//jsfiddle.net/2q73angs/ – zdolny

试试这个：

[data-reactroot] 
 
     {height: 100% !important; }

来源

2017-10-16 12:25:48

你需要设置你的根HTML标记的高度为100％：

html { 
    height: 100%; 
}

另一种方法是直接设置高度，使用viewport units：

targetelement { 
    height: 100vh; 
}

我怀疑你可能会感兴趣在后者，考虑到你对flexbox的倾向。我个人觉得比分层依赖百分比的元素简单得多。

来源

2017-10-16 12:53:02

'：root'与'html'相同 – tommyd456

你忘了<html>也是一个标签。而且，它是所有父母的父母！这就是为什么你应该给它100％的高度。

html, body { height: 100%; }

来源

2017-10-16 12:59:38 Vitiok

'：root'与'html' – tommyd456

CSS 100％高度在React应用程序中不起作用

回答

相关问题