当 html 元素具有不同的父元素时，如何水平对齐它们
[英]How to align html elements horizontally when they have different parents
问题描述
I have a basic html document with a sticky header and footer.
我有一个带有粘性 header 和页脚的基本 html 文档。 I also have a div below the header that sticks to the header because it will eventually contain some tabs above a form.我在 header 下方还有一个 div，它与 header 相连，因为它最终会在表单上方包含一些选项卡。 I have tried to align the form below this vertically but they don't line up.我试图垂直对齐下面的表格，但它们没有对齐。 The problem is the tab div does not have a scrollbar but the form does.问题是选项卡 div 没有滚动条，但表单有。 This means the width of the form is different to the width of the tabs.这意味着表单的宽度与选项卡的宽度不同。 I tried to set them to 70% of the width and center but, because of the scrollbar they don't line up.我试图将它们设置为宽度和中心的 70%，但是由于滚动条，它们没有对齐。 I've tried some javascript to get the width of the scrollbar and then add this to the current right margin but it doesn't work.我尝试了一些 javascript 来获取滚动条的宽度，然后将其添加到当前的右边距，但它不起作用。 You will see the form is not as wide as the tabs div.您会看到表单没有选项卡 div 宽。 I have spent hours on this.我花了几个小时在这上面。 Also, I tried adding a margin-bottom to the form but no margin appears below the border.此外，我尝试在表单中添加一个边距底部，但边框下方没有出现边距。
$(document).ready(function () { setFormsWidth(); }); function setFormsWidth() { let scrollbox = document.createElement('div'); // Make box scrollable scrollbox.style.overflow = 'scroll'; // Append box to document document.body.appendChild(scrollbox); // Measure inner width of box scrollBarWidth = scrollbox.offsetWidth - scrollbox.clientWidth; // Remove box document.body.removeChild(scrollbox); // Get current width of right margin, which should be 30% of the // width of the form-panel parent (the content class). var formPanel = document.getElementById("main-form"); // Get the current right margin and remove the px at end of number var style = window.getComputedStyle(formPanel); var marginRightString = style.getPropertyValue('margin-right'); var marginRight = marginRightString.slice(0,-2); // now addthe scrollBarWidth to the right margin var newMargin = marginRight + scrollBarWidth; formPanel.style.marginRight = newMargin + "px"; }
html, body { height: 100%; margin: 0; overflow:hidden; }.wrapper { height: 100%; display: flex; flex-direction: column; }.header, .footer { background: silver; }.page { flex: 1; overflow: auto; background: pink; }.content { background-color: green;; }.tabs { width: 70%; height: 50px; background-color: aqua; margin: 0 auto; border-bottom: solid #FE6D73 7px; }.form-panel { width: 70%; height: 1000px; background-color: #FFF; margin: 0 auto; overflow-y: auto; border-bottom: solid #FE6D73 7px; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style:css"/> </head> <body> <div class="wrapper"> <div class="header">Header</div> <div class="tabs"> THIS IS TAB </div> <div class="page" id="calculator"> <div style="height;1000px."> <div class="content"> <form class="form-panel" id="main-form">THIS IS FORM</form> </div> </div> </div> <div class="footer">Footer</div> </div> <script type="text/javascript" src="script:js"></script> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </body> </html>
1 个解决方案
解决方案1
0 2022-08-30 09:18:34
I suggest to show the scrollbar besides .form-panel element but not .page div, so it will not affect centering .form-panel element.我建议在.form-panel元素之外显示滚动条，而不是.page div，这样不会影响.form-panel元素的居中。
Here is how to change the css.以下是如何更改 css。
- Set height to 100% for all elements between
.pageand.form-panelelements, including.form-panelitself, so that scrollbar for.pagewill not be shown将.page和.form-panel元素之间的所有元素（包括.form-panel本身）的高度设置为 100%，这样.page的滚动条就不会显示 - Set
box-sizing: border-box;设置box-sizing: border-box;for.form-panel, so that the border is drawn inside.form-panel对于.form-panel，以便在.form-panel内绘制边框 - move
.footeroutside.pageelement将.page移到.footer元素之外
If you would like to set a specific height for .form-panel , you can create a div inside it and set its height like below:如果你想为.form-panel设置一个特定的高度，你可以在其中创建一个 div 并设置它的高度，如下所示：
html, body { height: 100%; margin: 0; overflow:hidden; }.wrapper { height: 100%; display: flex; flex-direction: column; }.header, .footer { background: silver; }.page { flex: 1; overflow: auto; background: pink; }.content { background-color: green; height: 100%; }.tabs { width: 70%; height: 50px; background-color: aqua; margin: 0 auto; border-bottom: solid #FE6D73 7px; }.form-panel { width: 70%; height: 100%; background-color: #FFF; margin: 0 auto; overflow-y: auto; border-bottom: solid #FE6D73 7px; padding-bottom: 7px; box-sizing: border-box; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style:css"/> </head> <body> <div class="wrapper"> <div class="header">Header</div> <div class="tabs"> THIS IS TAB </div> <div class="page" id="calculator"> <div style="height;100%:"> <div class="content"> <form class="form-panel" id="main-form"> <div style="height:1000px"> THIS IS FORM </div> </form> </div> </div> </div> <div class="footer">Footer</div> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.