将div扩展到浏览器水平滚动条宽度 [英] Expand div to browser horizontal scrollbar width
问题描述
在实现以下目标方面的任何帮助将不胜感激.
我有一个母版页，页面顶部带有标题栏，其中有2张图像，一个位于右上角，另一个位于左侧.在两者之间有空白.我在页面内容中有一个网格，如果网格列增加，我将获得水平滚动条.但是图像的宽度在母版页上保持固定，当页面滚动到左侧时，它看起来很奇怪.因此，我想增加标题栏中的中间空白宽度，并在左右角处保留图像位置.
请提供任何输入/建议以获取此信息.
在此先感谢
Hi,
Any help in achieving the below would be greatly appreciated.
I have a master-page with Title bar on top of the page where I have 2 images, one to the right corner and other to the left. In between there is blank white space. I have a grid in the page content and I''ll get the horizontal scroll-bar if the grid columns increase. But the width of the image remains fixed at the master-page which looks odd when the page is moved to the left with scrolling. So I want to increase the middle white space width in the title bar, retaining image positions at right and left corners.
Please provide any inputs/suggestions in getting this.
Thanks in advance
推荐答案
您可以为此使用CSS.
将标题DIV设置为margin-left:auto;margin-right:auto;width:95%，对于图像，相应地使用float:left或float:right.相应地设置宽度％.
另外，您可以将整个页面(页眉，正文，页脚)包装在另一个DIV中，并使用它来控制确切的宽度作为布局的根.
干杯.
You can use CSS for this.
Set your header DIV tomargin-left:auto;margin-right:auto;width:95%and for your images use float:left orfloat:rightaccordingly. Set your width % accordingly.
Alternatively, you can wrap your entire page (header, body, footer) inside another DIV and use that to control the exact width as your layout root.
Cheers.
下面是我尝试过的并且工作正常.
母版页:
Below is what I tried and is working fine.
MasterPage:
<body>
<form id="form2" runat="server">
<table style="min-width:100%">
<tr>
<td>
<table style="width: 100%;">
<tr>
<td style="width: 100px;">
<img id="Img1" src="~/Images/Image1.jpg" runat="server" />
</td>
<td style="background-image: url('Images/Image2.jpg');
background-repeat: no-repeat; background-position: center; width: 99%;">
</td>
<td style="width: 100px;">
<asp:Image ID="imgLogo" ImageUrl="~/Images/Image3.jpg" runat="server" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</div>
</td>
</tr>
</table>
</form>
</body>
内容页面:
将页面内容放入具有以下样式的div中:
Content Page:
Put the page content inside a div with below style:
<pre lang="xml"><asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder" runat="Server">
<div style="white-space: nowrap">
Page content here
</div>
</asp:Content>
这篇关于将div扩展到浏览器水平滚动条宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
