Question

我在div包装器中有一个GridView，左侧有一些行标题需要始终可见。到目前为止这一切都有效，但我需要包装器具有可变宽度以适合浏览器大小。

我使用一些javascript根据浏览器宽度得到了所需的包装宽度，但我无法弄清楚如何将此宽度设置为wrapper.width。
在页面加载或检查浏览器大小调整后，它不必更新包装器宽度。

我对图表的不良尝试：

|   |column headers      |
| R |--------------|      
| O | gridview data      |
| W |              |      
|   |  this part         |
| H |  will scroll |<--->
| E |  while the         |
| A |  Row headers |
| D |  stay there        |
| E |              |
| R |______________      |
| S | scroll bar   |

asp :(见下面的编辑）

<pseudocode>
 <table>
   <tr><td>row headers</td>
       <td><div class="Wrapper">
              <asp:GridView>dataBind()</asp:gridview>
       </div></td></tr>
 </table>
</pseudocode>

的CSS：

div.Wrapper 
{
 width:800px;<--this needs to change based on the browser width
 overflow: auto;
}

的javascript：

var Width = window.innerWidth - 275 || document.body.clientWidth - 275

我要么需要一种方法来设置wrapper.width = Width，或者是一种完全不同的，希望更好的方法来实现这一点。

我尝试使用％作为宽度，但它不使用浏览器窗口为100％，它占用了整个GridView的全宽度的百分比，它对我没有任何作用。

提前感谢您的帮助。

编辑：添加了一些代码

<script type="text/javascript">
    var Width = window.innerWidth - 275 || document.body.clientWidth - 275;
    var divElement = document.getElementById("wrappist");
<!--I tried a few different things at this point, here are a couple of them-->
    divElement.offsetWidth = "80px";
    divElement.style.width = Width.toString() + 'px'; 
</script>

<div runat="server" id="wrappist" class="Wrapper">
  <asp:GridView runat="server" ID="ALPGrid" CssClass="Grid"
       CellPadding="5" GridLines="Both" AutoGenerateColumns="false"
       OnRowDataBound="ALP_RowDataBound" OnRowCreated="ALP_RowCreated"
       DataKeyNames="ItemID">
  <HeaderStyle CssClass="GridHeader" />
  <RowStyle CssClass="Row" />
  <columns>column stuff in here</columns>
  </asp:GridView>
</div>

Answer 1

试试这个：

var Width = window.innerWidth - 275 || document.body.clientWidth - 275
var divElement = document.getElementById('idOfDiv');
d.style.width = Width.toString() + 'px';

编辑：忘了解释一下。这会在元素上设置div的内嵌宽度，因此它将覆盖类中的样式。

Answer 2

纯CSS解决方案怎么样？

<div class="wrapper">
<div class="row_headers"></div>
<div class="grid"></div>
</div>

css

.wrapper
{
width:800px; /*remove/change */
}
.row_headers
{
float:left;
width:100px; /*keep same as .grid margin-left */
height:300px;
background-color:#333;
padding-bottom:16px;
}
.grid
{
margin-left:100px; /*keep same as .row_headers width */
height:300px;
padding-bottom:16px;
background-color:#ddd;
overflow:auto;
}

如何从javascript函数结果设置CSS宽度？

2 个答案: