Html 如何使我的div与我以前的div兄弟具有相同的高度_Html_Css_Height_Percentage_Siblings

Html 如何使我的div与我以前的div兄弟具有相同的高度

html css

Html 如何使我的div与我以前的div兄弟具有相同的高度,html,css,height,percentage,siblings,Html,Css,Height,Percentage,Siblings,我希望我的一个div与我以前的div具有相同的高度。我使用了宽度和高度的百分比（因此在移动设备上看起来也更好。我也尝试过将父元素设置为100%的宽度和高度（在一些论坛帖子中看到了这一点，但它不起作用）。我也尝试过使用display:table cell，但也不起作用。我的设置是这样的： index.php： <!DOCTYPE html> <html> <head> <meta charset = "UTF-8"/>

我希望我的一个div与我以前的div具有相同的高度。我使用了宽度和高度的百分比（因此在移动设备上看起来也更好。我也尝试过将父元素设置为100%的宽度和高度（在一些论坛帖子中看到了这一点，但它不起作用）。我也尝试过使用display:table cell，但也不起作用。我的设置是这样的：

index.php：

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "UTF-8"/>
        <title>SiteTitle</title>
        <link rel = "stylesheet" type = "text/css" href = "styles/index.css"/>
    </head>
    <body>
        <div id = "allContent">
            <div id = "header">
                <div id = "siteLogo">
                    <h1 id = "title">Site_Title</h1>
                </div>
                <div id = "shortMenu">
                    <a href = "#">Login</a>
                </div>
            </div>
        </div>
    </body>
</html>

不知道现在要检查什么。。我基本上希望

登录

链接的底部与网站标题的底部对齐。稍后我可能会将其更改为徽标图像，因此高度可能会改变，如果我决定多次更改，我不想更改值。现在

登录

链接位于页面顶部。

编辑：我添加了以下代码行，但它给每个div提供了50%的宽度

div#allContent div#header {
  margin: 0px;
  padding: 0px;
  display: flex;
}

div#allContent div#header div {
  flex: 1;
}

我更改了以下选择器。请注意，display:inline block；是为了防止ie11可能出现的错误。此外，为了简洁起见，我没有包括供应商前缀样式

div#allContent div#header div {
  flex: 1;
  display: inline-block;
  display: flex;
  justify-content: center;
  align-items: center;
}

尝试此代码

使用

显示：表格单元格

正文{
背景色：rgb（0,0,0）；
边际：0px；
填充：0px；
颜色：rgb（192,74,0）；
}
分区#所有内容{
宽度：80%；
保证金：自动；
}
div#所有内容div#标题{
边际：0px；
填充：0px；
}
div#所有内容div#标题div#站点徽标h1#标题{
边际：0px；
填充：0px；
字体大小：300%；
字体系列：无衬线；
}
div#所有内容div#标题div#快捷菜单a{
字体系列：无衬线；
颜色：rgb（204204204）；
文字装饰：无；
}
div#所有内容div#标题div#快捷菜单{
宽度：30%；
边框：1px纯绿色；
显示：表格单元格；
垂直对齐：中间对齐；
}
div#所有内容div#标题div#站点徽标{
边际：0px；
填充：0px；
宽度：70%；
边框：1px纯蓝色；
显示：表格单元格；
}
div#所有内容div#标题{
边际：0px；
填充：0px；
宽度：100%；
显示：表格；
}


网站名称

我找到了flex样式，但我更喜欢使用表格单元格，因为我觉得我有更多的控制权。我不确定我以前尝试过什么，但它是有效的。我必须再次查看CSS，已经3到4年了，哈哈。

div#allContent div#header div {
  flex: 1;
  display: inline-block;
  display: flex;
  justify-content: center;
  align-items: center;
}